跨域请求中的cookies处理
现在的前后端开发已经完全分离,后端服务器和前端服务器分别部署在不同的服务器。同时也对应不同的域名,所以跨域请求领域方面的知识也需要补充。
# 跨域请求添加 header
我们都知道,出于安全考虑,JS 是有同源策略限制。所以,我们在对其他域名发起请求的时候需要添加 http header。
Access-Control-Allow-Origin: *
1
这个参数的值只能为星号或者具体的网址,星号代表所有网站。
# 跨域请求添加 cookie
JS 跨域请求有两个 API 可以使用,XMLHttpRequest
和fetch
。XMLHttpRequest
会默认带上 cookies,但是fetch
默认不会带上。如果需要带上 cookies,需要把withCredentials
设置为true
。
# 跨域请求服务器设置 cookie
我们都知道服务器设置 cookie 是通过set-cookie
的 http header 来完成。浏览器会读取这个信息设置 cookie。但是对于跨与请求,默认是无效的。我们需要再添加一个 http header。
Access-Control-Allow-Credentials: true
1
当设置了这个 http header,Access-Control-Allow-Origin
就不能设置为星号了,必须指定具体的网址。我们必须指定withCredentials
为true
并且Access-Control-Allow-Credentials
为true
的时候,服务器返回的set-cookie
才会生效。
参考: