chrome浏览器91版本,Chrome中跨域请求无法携带Cookie的解决方案

前些时候,发觉自己的vue项目node环境上跑不起来。请求后台的接口直接来了个400报错。如下:
在这里插入图片描述
这一看,不太妙,服务器直接来一个“您提交的数据无法被验证” 。好家伙,发现就是携带的cookiedi丢失了。请求接口Set-Cookie后头有一个黄色的感叹号,鼠标放上去有一个浮窗弹出,大致意思就是说,有一个另一个域的请求被组织了,可以通过将“SameSite=Lax”修改成为“SameSite=None”。意思很明确了,就是人家google的浏览器chrome不让跨域乱搞了,哦豁,这就玻璃心了。我y的就在自己的项目捣鼓,你管我跨域干嘛呢?我又不上天。特别是新版本的chrome这个安全性是真的重重设置的,没办法,谁让他们的浏览器好用呢,我只好自己去寻找解决方式。

在这里插入图片描述
如果这个时候按照chrome旧版本的修改方式,放眼91版本之前的版本来说,还是可能行得通,毕竟人家老版本的还能够在chrome://flags/访问页面中,找到samesite 将same-site-by-default-cookies,和SameSite by default cookies。居然能够找到,而且后边还有操作的选择,那就直接改就完事了的。
在这里插入图片描述
Chrome中访问地址chrome://flags/ 搜索samesite 将same-site-by-default-cookies,和SameSite by default cookies这两项设置为Disabled后重启浏览器再运行项目即可解决。该设置默认情况下会将未指定SameSite属性的请求看做SameSite=Lax来处理。

91版本的chrome已经把上述两个设置给隐藏了,那我们就不能在链接中优雅修改cookie的连接方式了。还好,windows上能够解决这个方式;mac上也是能够解决这个问题的。
Windows:打开Chrome快捷方式的属性,在 目标 后添加

--disable-features=SameSiteByDefaultCookies

或者添加

--flag-switches-begin --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure --flag-switches-end

,点击确定,就搞定了。这里目标后头注意需要有空格,一个乃至多个都可以的。
在这里插入图片描述
在这里插入图片描述
Mac:Mac系统下可以通过命令行携带参数打开浏览器的方式来解决,前提须关闭所有浏览器窗口并退出浏览器后再进行操作。
开启Chrome命令:

open -a "Google Chrome" --args --disable-features=SameSiteByDefaultCookies

开启Chromium版Edge浏览器命令:
open -a “Microsoft Edge” --args --disable-features=SameSiteByDefaultCookies

在这里插入图片描述
https://www.chromium.org/updates/same-site 里边有SameSite Updates,里边有一句话“Latest update:

Mar 18, 2021: The flags #same-site-by-default-cookies and #cookies-without-same-site-must-be-secure have been removed from chrome://flags as of Chrome 91, as the behavior is now enabled by default. In Chrome 94, the command-line flag --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure will be removed.”
在这里插入图片描述

这就不太妙了,到94版本的时候,上述的两个属性直接要被剔除掉。
所以那个时候,可以用回旧版本的chrome,也可以让后台不要用cookie传参了,可以用token的就不要用cookie。或者直接在开发环境作业, 同样也使用https也许是最简单的一种办法。当然了,不用chrome也是一个解决方式。

参考文件:
https://juejin.cn/post/6967695146322247716
https://blog.csdn.net/weixin_46146313/article/details/117707199

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
Chrome浏览器版本108开始,对于跨域问题做出了一些改变。在此之前,浏览器是严格限制跨域请求的,但是自从Chrome 108版本之后,浏览器默认支持通过一些新的方法来解决跨域问题。 首先,Chrome 108引入了新的CORS(跨域资源共享)规范,它通过在服务器的响应头添加一些额外的字段来指示浏览器是否允许跨域请求。如果服务器返回的响应包含了'Access-Control-Allow-Origin'字段且值为请求的域名,则浏览器将允许该跨域请求。这样,网页开发者可以通过在服务器端设置正确的响应头来解决跨域问题。 其次,Chrome 108还引入了一种新的跨域请求方式,即Fetch API。Fetch API是一种用于代替传统的XMLHttpRequest对象的新的网络请求API,它默认支持跨域请求,并且提供了一系列的方法和选项来处理跨域问题。通过使用Fetch API,网页开发者可以更灵活地发送和处理跨域请求。 此外,Chrome 108还提供了一些其他的跨域解决方案。例如,开发者可以在服务器端设置CORS策略,通过细粒度的配置来控制哪些域名可以进行跨域请求。另外,Chrome 108也支持通过在请求添加'Access-Control-Allow-Credentials'字段来允许跨域请求携带认证信息。 综上所述,Chrome浏览器108版本以上对跨域问题做出了一些改进和优化。通过使用CORS规范、Fetch API以及其他解决方案,网页开发者可以更轻松地处理跨域请求,并提供更好的用户体验。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值