Chrome 浏览器 Cookie 跨域共享与Chrome升级91版本问题

Chrome 51版本后91版本前

Chrome 51 版本开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪。SameSite 可以设置三个值（Strict、Lax、None）。

详见阮一峰的Cookie 的 SameSite 属性

由此可见，在开发过程中运行本地项目调试接口，如果某些接口使用cookie作为校验，会涉及到cookie跨域丢失问题。对于前端来说，调试项目时想要实现浏览器跨域共享cookie，必须设置浏览器的实验属性。

1. 在Chrome 地址栏输入chrome://flags打开Chrome 实验。
2. 通过设置SameSite by default cookies、Cookies without SameSite must be secure 来实现SameSite和Secure的设置。
   
3. 重启浏览器

Chrome 91版本后

2021年5月27日发布的Chrome 91版本后，Chrome实验属性关于SameSite by default cookies、Cookies without SameSite must be secure的设置消失了，应该是 Chromium 升级了，使用 Chromium 的浏览器都无法设置了，目前有俩种开发调试时的临时解决办法。

方式1：下载旧版chrome

Chrome 各版本下载地址

官方Edge浏览器各版本下载地址

如果懒得下百度网盘的话可以从我的资源那里下载89版本的Chrome，不要积分~~，我也是从别处下载的。
下载之后按照91版本前的方式一配置就ok了。

方式2：修改chrome快捷方式目标

这种方式预计在94版本之后将变为不可用

1. 在chrome的快捷方式右击–>属性
2. 在目标输入框最后面加一个空格，然后粘贴以下内容，应用保存就可以了。

--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：用火狐

目前火狐是不存在这个问题的，不过我不太习惯火狐的使用。在不久后，估计火狐也会进行相关的升级工作。

大神们如果有别的更好的解决方案欢迎留言~~~