ajax跨域携带cookie注意事项

1,820 阅读2分钟

一、一般性设置问题

异步请求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. 前端发送请求的 XMLHttpRequestwithCredentials 标志设置为 true

对于不同ajax框架设置withCredentials的方式各不相同,需要查看具体框架api文档。

以上设置成功后可以在响应头看到结果:

二、chrome 上安全设置问题

做了上述设置在FireFox、Safire 可能没问题,但在较新chrome浏览控制台可能提示以下警告,并且依旧不能携带cookie。

这里提示的是跨域 cookies 必须被标记为Secure。

这就需要了解浏览器为 cookie 新增的一个属性 SameSite

SameSite是用来限制第三方 Cookie,从而减少安全风险,它有三个值:

  1. Strict 最为严格,完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie
  2. Lax 规则稍稍放宽,大多数情况也是不发送第三方 Cookie,但是导航到目标网址的 Get 请求除外
  3. None 关闭SameSite属性,但是必须同时设置Secure属性(Cookie 只能通过 HTTPS 协议发送),否则无效。

所以作为 None这个选项,只能让跨域请求的站点支持 HTTPS。

另外,如果是开发人员本地调试,跳过这个限制可以通过打开chrome://flags,搜索SameSite by default cookies,将其设置为 disabled

参考