开发中遇到的 cookie 问题

1. cookie 无法跨域携带问题

尽管已经登录，但是请求接口返回状态码：202，msg： '未登录'，如下图所示；

1.1 XMLHttpRequest.withCredentials未设置

如果需要跨域 AJAX 请求发送 Cookie，需要withCredentials属性设为true。

① axios 按下图所示配置

② fetch 按下图所示配置

1.2 Access-Control-Allow-Origin 配置为*

如果 1.1 节确认已经配置，接口仍返回msg：'未登录'，此时可以查看服务端 Access-Control-Allow-Origin 是否设置为 *，这是因为：

• 请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“*”，请求将会失败。

1.3 浏览器问题

原因：Chrome 升级到80版本之后 cookie 的 SameSite 属性默认值由 None 变为 Lax，这也就造成了一些访问跨域 cookie 无法携带的问题。

SameSite 有三个值：

• Strict：仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 url 与请求目标 url 完全一致

• Lax：允许部分第三方请求携带 Cookie
• None：无论是否跨域都会发送 Cookie

80 版本之前默认是 None，80 版本之后默认是 Lax，所以会有一些跨域请求没有携带 Cookie

---

解决办法一：

• Chrome 版本 ＜ 91，输入 chrome://flags/ ，搜索 SameSite by default cookies ，将图中两项设置为 disabled，然后 relaunch

• Chrome 版本 ≥ 91，使用命令行（未验证）

open -a "Google Chrome" --args 
--disable-features=SameSiteByDefaultCookies

• Chrome 版本 ≥ 94，上述方式都被移除，只能通过本地代理、跨域请求等方法转为非跨域请求等方式

---

参考

Cookie SameSite 属性

 解决办法二：

91以上版本除使用以上命令行外，也可以使用如下 Chrome 扩展工具；

📎cookie插件v0.2.1.zip

结束