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