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",查看页面,然后分别单机两个按钮,查看请求结果: