跨域请求中的cookies处理

现在的前后端开发已经完全分离,后端服务器和前端服务器分别部署在不同的服务器。同时也对应不同的域名,所以跨域请求领域方面的知识也需要补充。

# 跨域请求添加 header

我们都知道,出于安全考虑,JS 是有同源策略限制。所以,我们在对其他域名发起请求的时候需要添加 http header。

Access-Control-Allow-Origin: *
1

这个参数的值只能为星号或者具体的网址,星号代表所有网站。

JS 跨域请求有两个 API 可以使用,XMLHttpRequestfetchXMLHttpRequest会默认带上 cookies,但是fetch默认不会带上。如果需要带上 cookies,需要把withCredentials设置为true

我们都知道服务器设置 cookie 是通过set-cookie的 http header 来完成。浏览器会读取这个信息设置 cookie。但是对于跨与请求,默认是无效的。我们需要再添加一个 http header。

Access-Control-Allow-Credentials: true
1

当设置了这个 http header,Access-Control-Allow-Origin就不能设置为星号了,必须指定具体的网址。我们必须指定withCredentialstrue并且Access-Control-Allow-Credentialstrue的时候,服务器返回的set-cookie才会生效。

参考:

Access-Control-Allow-Credentials (opens new window)

CORS (opens new window)