SpringBoot--配置CORS跨域支持

CORS

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

以CORS中的GET请求为例，当浏览器发起请求时，请求头中携带了如下信息：

...
...
Host: localhost:8080
Origin: http://localhost:8081
Referer: http://localhost:8081/index.html
...
...

假如服务端支持CORS，则服务端给出的响应信息如下：

...
...
Access-Control-Allow-Origin: http://localhost:8081
Content-Length: 20
Content-Type: text/plain;charset-UTF-8
Date: Thu, 12 Jul 2018 12:51:14 GMT
...
...

响应头中有一个Access-Control-Allow-Origin字段，用来记录可以访问该资源的域。当浏览器收到这样的响应头信息之后，提取Access-Control-Allow-Origin字段中的值，发现该值包含当前页面所在的域，就知道这个跨域是被允许的，因此就不再对前端的跨域请求进行限制。

这就是GET请求的整个跨域流程，在这个过程中，前端请求的代码不需要修改，主要是后端进行处理。这个流程主要是针对GET、POST以及HEAD请求，并且没有自定义请求头，如果用户发起一个DELETE请求，PUT请求或者自定义请求头，流程就会稍微复杂一些。

以DELETE请求为例，当前端发起一个DELETE请求时，这个请求的处理会经过两个步骤：

第一步：发送一个OPTIONS请求：

...
...
Access-Control-Request-Method DELEte
Connection keep-alive
Host localhost:8080
Origin http://localhost:8081
...
...

这个请求将向服务端询问是否具备该资源的DELETE权限，服务端会给浏览器一个响应，代码如下：

...
...
HTTP/1.1 200
Access-Control-Allow-Origin: http://localhost:8081
Access-Control-Allow-Methods: DELETE
Access-Control-Max-Age: 1800
Allow: GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH
Content-Length: 0
Date: Thu, 12 Jul 2018 13:20:26 GMT
...
...

服务端会给浏览器的响应，Allow头信息表示服务端支持的请求方法，这个请求相当于一个探测请求，当浏览器分析了请求头字段之后，直到服务端支持本次请求，则进入第二步。

第二步：发送DELETE请求。接下来就会发送一个跨越的DELETE请求，代码如下：

...
...
Host: localhost:8080
Origin: http://localhost:8081
Connection: keep-alive
...
...

服务端给一个响应：

...
...
HTTP/1.1 200
Access-Control-Allow-Origin: http://localhost:8081
Content-Type: text/plain;charset=UTF-8
Date: Thu 12 Jul 2018 13:20:26 GMT
...
...

至此，一个跨域的DELETE请求完成。

SpringBoot配置CROS

方式一：在响应的请求方法上配置

import org.springframework.web.bind.annotation.*;

/**
 * @Author: acton_zhang
 * @Date: 2020/2/4 12:05 下午
 * @Version 1.0
 */
@RestController
@RequestMapping("/book")
public class BookController {

    /*
        @CrossOrigin中的value表示支持的域，这里表示来自http://localhost:8081域的请求是支持跨域的
        maxAge表示探测请求的有效期
        allowHeaders表示允许的请求头，*表示所有的请求头都被允许
     */
    @PostMapping("/")
    @CrossOrigin(value = "http://localhost:8081", maxAge = 1800, allowedHeaders = "*")
    public String addBook(String name){
        return "receive:" + name;
    }

    @DeleteMapping("/{id}")
    @CrossOrigin(value = "http://localhost:8081", maxAge = 1800, allowedHeaders = "*")
    public String deleteBookById(@PathVariable int id){
        return String.valueOf(id);
    }
}

方式二：全局配置

package pers.zhang.sb_pro.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @Author: acton_zhang
 * @Date: 2020/2/4 1:03 下午
 * @Version 1.0
 */
@Configuration
public class MyConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/book/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .maxAge(1800)
                .allowedOrigins("http://localhost:8081");
    }
}

全局配置需要自定义WebMvcConfigurer接口，然后实现接口中的addCorsMapping方法
在addCorsMappings方法中，addMapping表示对哪种格式的请求路径进行跨域处理；
allowedHeaders表示允许的请求头，默认允许所有的请求头信息;
allowedMethods表示允许的请求方法，默认是GET、POST和HEAD;
*表示支持所有的请求方法;
maxAge表示请求的有效期;
allowedOrigins表示支持的域;

上述两种方式选择一种即可。

测试

新建一个SpringBoot项目，添加Web依赖，然后在resources/static目录下假如jquery.js，在resources/static目录下创建一个index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>CROS</title>
    <script src="jquery3.3.1.js" type="text/javascript"></script>
</head>
<body>
<div id="contentDiv"></div>
<div id="deleteResult"></div>
<input type="button" value="提交数据" onclick="getData()" /><br/>
<input type="button" value="删除数据" onclick="deleteData()" /><br/>

<script>
    function deleteData() {
        $.ajax({
            url: 'http://localhost:8080/book/99',
            type: 'delete',
            success: function (msg) {
                $("#deleteResult").html(msg);
            }
        })
    }

    function getData() {
        $.ajax({
            url: 'http://localhost:8080/book/',
            type: 'post',
            data: {name: '三国演义'},
            success: function (msg) {
                $("#contentDiv").html(msg);
            }
        })
    }
</script>
</body>
</html>

两个普通的Ajax都发送了一个跨域请求。

然后将项目的端口修改为8081：

server.port=8081

启动两个项目，浏览器输入"http://localhost:8081/index.html"，查看页面，然后分别单机两个按钮，查看请求结果：
在这里插入图片描述

吴声子夜歌

发布了716 篇原创文章 · 获赞 2079 · 访问量 26万+

他的留言板关注