Chrome 51版本后91版本前
Chrome 51 版本开始,浏览器的 Cookie 新增加了一个SameSite属性,用来防止 CSRF 攻击和用户追踪。SameSite 可以设置三个值(Strict、Lax、None)。
详见阮一峰的Cookie 的 SameSite 属性
由此可见,在开发过程中运行本地项目调试接口,如果某些接口使用cookie作为校验,会涉及到cookie跨域丢失问题。对于前端来说,调试项目时想要实现浏览器跨域共享cookie,必须设置浏览器的实验属性。
- 在Chrome 地址栏输入
chrome://flags打开Chrome 实验。 - 通过设置
SameSite by default cookies、Cookies without SameSite must be secure来实现SameSite和Secure的设置。
- 重启浏览器
Chrome 91版本后
2021年5月27日发布的Chrome 91版本后,Chrome实验属性关于SameSite by default cookies、Cookies without SameSite must be secure的设置消失了,应该是 Chromium 升级了,使用 Chromium 的浏览器都无法设置了,目前有俩种开发调试时的临时解决办法。
方式1:下载旧版chrome
方式2:修改chrome快捷方式目标
这种方式预计在94版本之后将变为不可用
- 在chrome的快捷方式右击-->属性
- 在目标输入框最后面加一个空格,然后粘贴以下内容,应用保存就可以了。
--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure
方式3:proxy代理
这里以vue项目为例,加入我们请求的接口地址是http://10.2.18.3:8081/api/...,这类的格式,在vue.config.js里配置
devServer: {
open: false,
https: false,
hotOnly: true,
proxy: {
'/api': {
target: 'http://10.2.18.3:8081',
changeOrigin: true,
pathRewrite: { '^': '' }
}
}
}
设置axios的baseUrl为/api,这样开发环境走我们自己的代理,访问自己运行的服务,线上的话也能根据域名自己匹配,相当方便。
方式4:用火狐
目前火狐是不存在这个问题的,不过我不太习惯火狐的使用。在不久后,估计火狐也会进行相关的升级工作。
大神们如果有别的更好的解决方案欢迎留言~~~