最近在自习vue，在github上找了一个有前端和后端的项目，主要是有真实的数据请求。项目地址github.com/bailicangdu… ，但是项目是好几年前的，我是用的vue2.6，所以只能参考一下大佬的代码，然后配置那些都要自己慢慢琢磨了。 在本地进行登录请求的时候遇到了一些问题，在这里记录一下，也给其他网友一点参考意见，毕竟自己踩了两天，可能是基础知识有点薄弱，刚好也学习总结一下。我的chrome版本是版本 85.0.4183.121（正式版本） （64 位）
- 在进行登录请求的时候，一直提示我验证码失效
后来经过google各种搜索以及查看项目得issues，发现有人说是因为cookies问题
- 经过楼上朋友的提醒，又各种折腾，发现请求验证码的时候，服务端会发送一个cookies，里面携带了请求的验证，cap的值就是验证码的值
3. 然后问题又变成了怎么让axios请求的时候，带上这个cookies？经过各位网友的解答，设置了axios的withCredentials的值
axios请求的时候默认是不带cookies的，withCredentials属性主要功能是指定跨域的请求是否应该使用证书。所以前端需要设置axios.default.withCredentials:true。后端需要设置
Access-Control-Allow-Credentials: true，表示是否允许发送cookies。默认情况下，
Cookie不包括在CORS请求之中，设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。Access-Control-Allow-Origin: https://elm.cangdu.org ，表示接受任意域名的请求，origin不能设置为 * ，设置为*时与credentials为true不兼容 这里我在对axios进行封装的地方设置了
- 修改了axios配置，还是一样的错误提示，被逼无奈，我只好去看后端的代码，虽然我不怎么看得懂。发现后端在进行登录校验的时候，会先检查有没有req.cookies.cap这个值，原来这个就是cookies中的cap值，所以我又在纠结axios请求的时候怎么会带上cookies。
- 后来才知道，只要设置了withCredentials:true，后面再发送别的请求的时候，是会自动带上这个cookies的。但是我一直没有在chrome浏览器的network请求里面看到cookies，所以我解决问题的方向就开始偏离正确的路线了，我以为要我自己去获取这个cookies，然后请求的时候自己把这个cookies写进请求头Request Headers，解决问题的方向不知道偏离到哪了。经过我烦躁的踩坑，后来发现在firfox浏览器上是有看到这个cookies的，只是chrome浏览器没有显示。
- 琢磨了半天，终于发现了是chrome浏览器的问题，根本不是我请求的时候没带上cookies，后来google了一下，发现是浏览器升级后对跨域接口默认的安全策略变了，需要手动修改策略。引用另一个网友xowen找到的文档，
A cookie associated with a cross-site resource at accounts.google.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at
www.chromestatus.com/feature/508… and www.chromestatus.com/feature/563… Chrome升级到80版本之后cookie的SameSite属性默认值由None变为Lax，这也就造成了一些访问跨域cookie无法携带的问题。比如本地调试时使用http://localhost:8080/，而`cookie`是种在测试环境路径下这就造成本地调试跨域访问不通了。可以考虑在本地开发环境下`disable`该`SameSite`属性。在`Chrome`中访问`chrome://flags/`，搜索`SameSite`并设置为`disabled`即可。
- 经过一番折腾后，终于可以看到chrome浏览器里的cookies了。