一、一般性设置问题
异步请求ajax在跨域情况下,需要在服务器端做跨域资源共享(CORS) 设置。
如果ajax请求涉及到跨域并需要携带请求接口域名的 cookie 则需要注意:
1. CORS 配置中需要添加 Access-Control-Allow-Credentials: true
在 nginx 中增加如下配置:
add_header 'Access-Control-Allow-Credentials' 'true';
2. CORS 配置中 Access-Control-Allow-Origin 值不能为 *,必须指明具体域名地址
在 nginx 中增加如下配置:
add_header 'Access-Control-Allow-Origin' 'www.abc.com';
或者
add_header 'Access-Control-Allow-Origin' $http_origin;
3. 前端发送请求的 XMLHttpRequest 的 withCredentials 标志设置为 true
对于不同ajax框架设置withCredentials的方式各不相同,需要查看具体框架api文档。
以上设置成功后可以在响应头看到结果:
二、chrome 上安全设置问题
做了上述设置在FireFox、Safire 可能没问题,但在较新chrome浏览控制台可能提示以下警告,并且依旧不能携带cookie。
这里提示的是跨域 cookies 必须被标记为Secure。
这就需要了解浏览器为 cookie 新增的一个属性 SameSite。
SameSite是用来限制第三方 Cookie,从而减少安全风险,它有三个值:
Strict最为严格,完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 CookieLax规则稍稍放宽,大多数情况也是不发送第三方 Cookie,但是导航到目标网址的 Get 请求除外None关闭SameSite属性,但是必须同时设置Secure属性(Cookie 只能通过 HTTPS 协议发送),否则无效。
所以作为 None这个选项,只能让跨域请求的站点支持 HTTPS。
另外,如果是开发人员本地调试,跳过这个限制可以通过打开chrome://flags,搜索SameSite by default cookies,将其设置为 disabled