背景
本地运行前端项目,通过localhost访问,向后端接口发送请求时后端一直无法获取当前用户登录态,接口返回用户未登录信息。
原因分析
通过排查后发现当前项目向跨域域名发送POST请求时一直无法携带Cookie进行请求,导致后端接口无法通过Cookie获取当前用户的登录态。
原因是Chrome 80版本后当服务端未指定HTTP响应头的SameSite
属性时,Chrome默认的SameSite策略为Lax,该策略中当向跨域域名发送POST请求时无法携带Cookie。
解决方案
- 低于91版本的Chrome浏览器:
Chrome中访问地址chrome://flags/#same-site-by-default-cookies
,将SameSite by default cookies
设置为Disabled
后重启浏览器再运行项目即可解决。该设置默认情况下会将未指定SameSite属性的请求看做SameSite=Lax
来处理。
- 91版本及以上的Chrome浏览器:(方案1中的设置在91版本后已被Chorme移除)
Windows:打开Chrome快捷方式的属性,在目标
后添加--disable-features=SameSiteByDefaultCookies
,点击确定,关闭所有Chrome窗口包括Chrome浏览器后再重启浏览器运行项目即可解决。
Mac:Mac系统下可以通过命令行携带参数打开浏览器的方式来解决,前提须关闭所有浏览器窗口并退出
浏览器后再进行操作。
- 开启Chrome命令:
open -a "Google Chrome" --args --disable-features=SameSiteByDefaultCookies
- 开启Chromium版Edge浏览器命令:
open -a "Microsoft Edge" --args --disable-features=SameSiteByDefaultCookies
PS: Mac系统下通过执行命令运行浏览器如果依旧无法解决可尝试重启浏览器后再执行命令打开浏览器,该命令需要保证完全关闭并退出浏览器再执行才能生效。
- 94及以上版本的Chrome浏览器
Chromium项目官网提到在94版本通过命令行禁用设置SameSite默认值的方式会被移除,到时方案1和方案2的方式都将无法使用,后续可通过nginx等代理工具或软件将跨域请求转为非跨域请求来解决改问题。
The flags #same-site-by-default-cookies and #cookies-without-same-site-must-be-secure have been removed from chrome://flags as of Chrome 91, as the behavior is now enabled by default. In Chrome 94, the command-line flag --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure will be removed.