SpringBoot - CORS跨域支持

CORS (Cross-Origin Resource Sharing）是由W3C制定的一种跨域资源共享技术标准，其目的就是为了解决前端的跨域请求。最常见的前端跨域请求解决方案是JSONP，但是JSONP只支持 GET 请求，这是一个很大的缺陷，而CORS则支持多种HTTP请求方法。

一、CORS跨域请求过程

1、GET、POST和HEAD请求

以get为例，浏览器发送请求时，请求头Request携带参数：
Request
如果服务端支持CORS，则服务端会给出响应信息：
Response
其中Access-Control-Allow-Origin，用来记录可以访问该资源的域。当浏览器收到这样的响应头信息之后，提取出Access-Control-Allow-Origin字段中的值，发现该值包含当前页面所在的域，就会允许这个跨域请求，不再限制。
整个流程就一步，只需要对后端代码进行处理。这个流程主要针对GET、POST以及HEAD请求，并且没有自定义请求头。

2、DELET、PUT及自定义请求头的请求

以put请求为例，整个请求处理会经过两个步骤：探测请求、真正的请求
①发送一个OPTIONS请求 - 探测请求
在这里插入图片描述
这个请求会向服务端询问是否具备PUT权限，服务端给浏览器一个响应

浏览器分析请求头字段，发现是支持的请求，则进入第二步。
②发送PUT请求

服务端响应：

到此为止，PUT请求完成。

二、SpringBoot使用CORS

实际上使用的就是Spring的@CrossOrigin注解。

1、创建一个SpringBoot工程 - 8080端口

①controller层配置跨域 - 方法注解跨域

value：支持的域
maxAge：探测请求有效期，默认1800秒，即在完成一次请求后的30分钟内不再需要发送探测请求
allowedHeaders：允许的请求头，*表示所有请求头都允许

@RestController
public class StudentController {

    @GetMapping("/getCors")
    @CrossOrigin(value = "http://localhost:8081",maxAge = 1800,allowedHeaders = "*")
    public String getCors(String name){
        return "收到Get请求：" + name;
    }

    @PutMapping("/putCors")
    @CrossOrigin(value = "http://localhost:8081",maxAge = 1800,allowedHeaders = "*")
    public String putCors(String name){
        return "收到Put请求：" + name;
    }

②全局配置跨域

第一种方法通过在方法上面添加@CrossOrigin方法来进行跨越处理，另外一种做法是通过实现WebMvcConfigurer接口的addCorsMappings方法进行全局控制。

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/getCors")
                .allowedHeaders("*")   // 允许的请求头，*表示允许所有
                .allowedMethods("*")   // 允许的方法，默认是GET、POST、HEAD,*表示所有
                .maxAge(1800)          // 探测请求有效期
                .allowedOrigins("http://localhost:8081");  // 支持的域
    }

2、创建SpringBoot工程 - 8081端口

在resources/static文件下创建html文件，用于发送请求。

<body>
<div id="getDiv"></div>
<div id="putDiv"></div>
<input type="button" value="发送GET请求" onclick="getData()"><br>
<input type="button" value="发送PUT请求" onclick="putData()">
<script src="js/jquery.min.js"></script>
<script>
    function getData() {
        $.ajax({
            url:"http://localhost:8080/getCors",
            type:'get',
            data:{name:'GET跨域请求'},
            success:function (msg) {
                $("#getDiv").html(msg);
            }
        })
    }

    function putData() {
        $.ajax({
            url:"http://localhost:8080/putCors",
            type:'put',
            data:{name:'PUT跨域请求'},
            success:function (msg) {
                $("#putDiv").html(msg);
            }
        })
    }
</script>
</body>