解决chrome的sameSite的本地开发问题

1,639 阅读1分钟

在一个懒散的周末过后,突然在日常搬砖中发现本地开发请求测试环境的cookie又失效了。

032F57E83C083B414429688509C54D1A.gif

不好意思发错图了

我明明记得用chrome://flags的实现性功能菜单把他关闭了的啊。

sameSite by default cookies选项设置为disabled

只好开始百度大法,果不其然在最新的91版本之中,chrome已经把这项实验性开关去除了。

FB255EE568A966EC119E01BC044BB9CA.jpg

行,你说了算。 继续研究发现可以用命令行强制关闭这个策略开关。

方法可以参考这个帖子:Chrome中跨域POST请求无法携带Cookie的解决方案

但是基于最新的版本更新规则,在94版本以后命令行修改也不会被支持了。

看来又得捡起来最初的改host大法来解决了:

我们知道sameSite的验证规则是不同于同源策略的, 具体规则可以查看这篇讲解

因此对于支持普通http协议的测试环境a.xxx.com

我们在host文件之中增加配置:

127.0.0.1 localhost
# 适配你的本地开发
127.0.0.1 test.xxx.com

重启浏览器后发现并没有直接生效,反而Vue脚手架报了个Invalid Host header

原来现在这样无法通过Webpack的host checking,因此我们也需要对应修改vue-cli中的devServer配置

devServer: {
  disableHostCheck: true,
}

再次重启项目后,可以看到顺利带上我们的cookie了。