Spring解决跨域问题（@CrossOrigin）

悠悠 2022-05-17 08:22 189阅读 0赞

# 一、关于跨域介绍 #

在前后分离的架构下，跨域问题难免会遇见比如，站点 [http://domain-a.com][http_domain-a.com] 的某 HTML 页面通过 的 src 请求 [http://domain-b.com/image.jpg][http_domain-b.com_image.jpg]。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。

跨域的体现，在于它的域名不同或者端口不同，但要注意以下的形式为非跨域模式  
[http://www.example.com/index.html][http_www.example.com_index.html] ==> [http://www.example.com/login.html][http_www.example.com_login.html]

--------------------

# 二、Spring解决跨域问题(@CrossOrigin) #

1、@CrossOrigin使用场景要求

*  jdk1.8+
 *  Spring4.2+

2、@CrossOrigin源码解析(翻译参考网络，文末列出参考地址)

@Target({ ElementType.METHOD, ElementType.TYPE })
    @Retention(RetentionPolicy.RUNTIME)
    @Documented
    public @interface CrossOrigin { 
    
        String[] DEFAULT_ORIGINS = { "*" };
    
        String[] DEFAULT_ALLOWED_HEADERS = { "*" };
    
        boolean DEFAULT_ALLOW_CREDENTIALS = true;
    
        long DEFAULT_MAX_AGE = 1800;
    
    
        /** * 同origins属性一样 */
        @AliasFor("origins")
        String[] value() default {};
    
        /** * 所有支持域的集合，例如"http://domain1.com"。 * <p>这些值都显示在请求头中的Access-Control-Allow-Origin * "*"代表所有域的请求都支持 * <p>如果没有定义，所有请求的域都支持 * @see #value */
        @AliasFor("value")
        String[] origins() default {};
    
        /** * 允许请求头重的header，默认都支持 */
        String[] allowedHeaders() default {};
    
        /** * 响应头中允许访问的header，默认为空 */
        String[] exposedHeaders() default {};
    
        /** * 请求支持的方法，例如"{RequestMethod.GET, RequestMethod.POST}"}。 * 默认支持RequestMapping中设置的方法 */
        RequestMethod[] methods() default {};
    
        /** * 是否允许cookie随请求发送，使用时必须指定具体的域 */
        String allowCredentials() default "";
    
        /** * 预请求的结果的有效期，默认30分钟 */
        long maxAge() default -1;
    }

3、@CrossOrigin的使用

/** * @Title: UserController * @ProjectName demo * @Description: 请求处理控制器 **/
    @RestController
    // 实现跨域注解
    // origin="*"：代表所有域名都可访问
    // maxAge：简单来说就是Cookie的有效期,单位为秒
    // 若maxAge是负数,则代表为临时Cookie,不会被持久化,Cookie信息保存在浏览器内存中,浏览器关闭Cookie就消失
    @CrossOrigin(origins = "*", maxAge = 3600)
    public class UserController { 
        @Resource
        private IUserFind userFind;
    
        @GetMapping("/finduser")
        public User finduser(@RequestParam(value="id") Integer id){
            //此处省略相应代码
        }
    }

正常调用：  
![这里写图片描述][70]

前端跨域请求：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>demo</title>
            <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
        </head>
        <body>
            <input type="button" value="测试" onclick="ajaxloding()" />
            <div id="usermessage"></div>
            <script> var getdata=0; function ajaxloding(){ $.ajax({ async:false, type:"get", url:"http://localhost:8080/api/finduser?id=1", contentType: "application/x-www-form-urlencoded", dataType: "json", data: {}, success:function(result){ getdata=result.name }, error: function (errorMsg) { //请求失败时执行该函数 alert("请求数据失败!"); } }); $("#usermessage").text(getdata) } </script>
        </body>
    </html>

这样就解决了跨域问题，获取了后台的数据：  
![这里写图片描述][70 1]

> 转载自[《SpringBoot解决CORS跨域（@CrossOrigin）》][SpringBoot_CORS_CrossOrigin]

[http_domain-a.com]: http://domain-a.com
[http_domain-b.com_image.jpg]: http://domain-b.com/image.jpg
[http_www.example.com_index.html]: http://www.example.com/index.html
[http_www.example.com_login.html]: http://www.example.com/login.html
[70]: /images/20220517/4620335c8585410bb4bad6a5a89ac075.png
[70 1]: /images/20220517/5e7d7a6decb5422a8343bd8cc6ac1dce.png
[SpringBoot_CORS_CrossOrigin]: https://blog.csdn.net/w_linux/article/details/81142413