标签：cookies axios 浏览器 请求 chrome true
最近在自习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了。
标签：cookies,axios,浏览器,请求,chrome,true 来源： https://blog.csdn.net/qq_40825921/article/details/119181219
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。