跨域请求中的cookies处理

Posted on

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

跨域请求添加header

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

    Access-Control-Allow-Origin: *

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

跨域请求添加cookie

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

跨域请求服务器设置cookie

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

    Access-Control-Allow-Credentials: true

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

参考:

Access-Control-Allow-Credentials

CORS