测试环境
- 前端:jQuery-3.6.0 Chrome-93.0.4577.63
- 后端:SpringBoot 2.4.10
Ajax配置
- 发送请求时需要把withCredentials设置为true
- jQuery的写法
$.ajax({
type: '...',
url: '...',
xhrFields: {
withCredentials: true
},
success: function(a, b, c) {
//do something
},
error: function(a, b, c) {
//do something
}
})
后端配置
- 在需要被跨域请求的
controller
上标注@CrossOrigin
- 在携带cookie的跨域请求中,
@CrossOrigin
需要配置参数,主要是origins
和allowCredentials
origins
参数的作用是指定被@CrossOrigin
标注的资源允许被哪些域进行跨域访问,在没有显式设置origins时,origins的值默认是*
,在这种情况下,响应头将会附带Access-Control-Allow-Origin: *
,从而实现没有Cookie
的跨域请求。但是对于附带Cookie
的请求,服务器不得设置Access-Control-Allow-Origin
的值为*
,所以需要显式的指定origins
。- 还需要在响应头中设置
Access-Control-Allow-Credentials: true
,如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true ,浏览器将不会把响应内容返回给请求的发送者,此时查看控制台会发现有报错信息
//如果需要设置允许所有origins,可以使用originPatterns = {"*"}
@CrossOrigin(origins = {"//前端请求的源地址,可通过请求头的Origin查看"},
allowCredentials = "true")
踩到的坑
设置了 Access-Control-Allow-Credentials: true
和 Access-Control-Allow-Origin
,但是发送的请求中依然不包含Cookie
要注意Cookie的路径问题
cookie
的作用域由Domain
和Path
属性决定,假设浏览器保存有一个作用域为http://127.0.0.1:8080/application/domain-a
的cookie
,那么在访问http://127.0.0.1:8081/application/domain-b
时,该cookie
是不会被附带的,这与是否跨域无关- 假设浏览器保存有一个作用域为
http://127.0.0.1:8080/application
的cookie
,那么在访问http://127.0.0.1:8081/application/domain-b
时,该cookie
是会被附带的,原因是对子路径的请求会附带上作用域为父路径的cookie
参考
链接: 跨源资源共享(CORS)