SpringBoot解决CORS跨域（@CrossOrigin）

雨点打透心脏的1/2处 2022-05-19 05:43 245阅读 0赞

### 一、关于跨域介绍 ###

在前后分离的架构下，跨域问题难免会遇见比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 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/login.html

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

### 二、Spring Boot跨域(@CrossOrigin) ###

> 当然这里虽然指SpringBoot但是SpringMVC也是一样的，要求在Spring4.2及以上的版本

##### 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使用 #####

> Spring Boot下的请求处理控制器

package com.example.demo.controller;
    
    import com.example.demo.domain.User;
    import com.example.demo.service.IUserFind;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.annotation.Resource;
    
    /**
     * @Title: UserController
     * @ProjectName demo
     * @Description: 请求处理控制器
     * @author 浅然
     * @date 2018/7/2022:18
    **/
    @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]

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

### 参考 ###

*  [Spring MVC 4.2 增加 CORS 支持][Spring MVC 4.2 _ CORS]
 *  [跨域 HTTP 请求][HTTP]

[70]: /images/20220519/3d315ef6605045e88406deba50e58ad3.png
[70 1]: /images/20220519/4f9e1b0dadd943df97e1fa2bbd885397.png
[Spring MVC 4.2 _ CORS]: https://blog.csdn.net/isea533/article/details/50449907
[HTTP]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS