（五）Spring Boot Web 开发【CORS 支持】

最新推荐文章于 2024-03-20 09:05:27 发布

夏天的味道٥

最新推荐文章于 2024-03-20 09:05:27 发布

阅读量282

点赞数 1

分类专栏： SpringBoot 文章标签： spring boot

本文链接：https://blog.csdn.net/qq_42217906/article/details/122475286

版权

SpringBoot 专栏收录该内容

35 篇文章 19 订阅

订阅专栏

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: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
Connect on 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 2021 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 2021 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
public class BookController {

    @PostMapping("addBook")
    public String addBook(String name){
        return "receive：" + name;
    }

    @DeleteMapping("deleteBook/{id}")
    public String deleteBook(@PathVariable(value = "id") String id){
        return "receive：" + id;
    }
}

3. 配置跨域

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

@CrossOrigin (value = "http://localhost:8081", maxAge = 1800 , allowedHeaders="*")
@PostMapping("addBook")
public String addBook(String name){
    return "receive：" + name;
}

@CrossOrigin (value = "http://localhost:8081", maxAge = 1800 , allowedHeaders="*")
@DeleteMapping("deleteBook/{id}")
public String deleteBook(@PathVariable(value = "id") String id){
    return "receive：" + 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; ＊表示支持所有的请求方法； max.Age 表示探测请求的有效期； allowedOrigins 示支持的域。

4. 测试

新建一个8081端口的项目，在 resources/static 目录下加入 jquery.js ，再resources/static 目录下建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></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>