Spring Boot 的CORS 支持

探索er

已于 2022-05-11 11:11:03 修改

阅读量1k

点赞数

分类专栏： Spring Boot 文章标签： java

于 2022-04-02 16:34:43 首次发布

本文链接：https://blog.csdn.net/qq_43581790/article/details/123923630

版权

Spring Boot 专栏收录该内容

44 篇文章 15 订阅

订阅专栏

CORS 支持

CORS (Cross-Origin Resource Sharing)是由W3C制定的一种跨域资源共享技术标准，其目的就是为了解决前端的跨域请求。在Java EE开发中，最常见的前端跨域请求解决方案是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:8081Content-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 DELETEConnection keep-alive
Host localhost : 8080
origin http:/ /localhost:8081
...

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

...
HTTP/1.1 200
Access-Control-Allow-Origin: http: //localhost:8081Access-Control-Allow-Methods:DELETE
Access-Control-Max-Age : 1800
Allow : GET,HEAD，POST,PUT，DELETE,OPTIONS，PATCHContent-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请求完成。
无论是简单请求还是需要先进行探测的请求，前端的写法都是不变的，额外的处理都是在服务端来完成的。在传统的Java EE 开发中，可以通过过滤器统一配置，而Spring Boot 中对此则提供了更加简洁的解决方案。在 Spring Boot中配置CORS的步骤如下:

1. 创建Spring Boot工程

首先创建一个 Spring Boot工程，添加Web依赖，代码如下:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. 创建控制器

在新创建的Spring Boot工程中，添加一个BookController 控制器，代码如下:

@RestController
@RequestMapping("/book")
public class BookController {
    @PostMapping("/")
    public String addBook (String name) {
        return "receive:"+name;
    }
    @DeleteMapping( " / {id} ")
    public String deleteBookById (@PathVariable Long id) {
        return String.valueOf(id);
    }
}

BookController中提供了两个接口:一个是添加接口，另一个是删除接口。

3. 配置跨域

跨域有两个地方可以配置。一个是直接在相应的请求方法上加注解:

@RestController
@RequestMapping("/book")
public class BookController {
    @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 Long id) {
        return String.valueOf(id);
    }
}

代码解释:

@CrossOrigin中的 value表示支持的域,这里表示来自http://localhost:8081域的请求是支持跨域的。
maxAge表示探测请求的有效期，在前面的讲解中，读者已经了解到对于DELETE、PUT请求或者有自定义头信息的请求，在执行过程中会先发送探测请求，探测请求不用每次都发送，可以配置一个有效期，有效期过了之后才会发送探测请求。这个属性默认是1800秒，即 30分钟。
allowedHeaders表示允许的请求头，* 表示所有的请求头都被允许。

这种配置方式是一种细粒度的配置，可以控制到每一个方法上。当然.也可以不在每个方法上添加@CrossOrigin注解，而是采用一种全局配置，代码如下:

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping ("/book/**")
                .allowedHeaders ("*")
                .allowedMethods ("*").maxAge (1800)
                .allowedOrigins ( "http://localhost:8081");
    }
}

代码解释:

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

在上面的两种配置方式(@CrossOrigin注解配置和全局配置）中，选择其中一种即可，然后启动项目。

4. 测试

重新新建一个Spring Boot项目，添加Web依赖，然后在 resources/static目录下加入jquery.js，再在resources/static目录下创建一个index.html文件，内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></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() {
        alert("aaaa")
        $.ajax({
            url:'http://localhost:8080/book/999',
            type:'delete',
            success: function (msg) {
                alert("msg")
                $("#deleteResult").html(msg);
            }
        })
    }

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