记一次本地开发中,chrome自动升级导致跨域问题

问题

本地起服务,访问页面的时候报错,刚还运行的好好的,怎么突然报错了???
经过一系列的排除定位问题,发现可能是因为浏览器版本导致的登陆问题,具体报错如下:
在这里插入图片描述

方案

方案一:更改浏览器默认配置

访问网址:chrome://flags/
Schemeful Same-Site禁用,设为disabled后,再重新刷新浏览器,没有报错了

在Chrome 80版本,SameSite的默认值被改为Lax

在这里插入图片描述

上述翻译:修改同站点计算,使得具有相同可注册域但不同方案的源被视为跨站点。此更改仅适用于具有“SameSite”属性的 cookie。 – Mac、Windows、Linux、Chrome 操作系统、Android

如果不想改浏览器,怎么办呢?具体原因等会再分析,先说解决方案

方案二:改请求代码

本地服务类似:http://dev.example.cn
后端服务的请求:https://back.example.cn
属于跨域访问,日常开发,本地服务是通过webpack-dev-server的方式启动,通过配置

proxy:{
	"/XXX"{
		target: "https://login.example.cn",
	    changeOrigin: true,
        secure: false,
	}
}

的方式解决跨域

之前代码网络请求地址在这里插入图片描述
chrome版本升级后,该请求地址跨域,无法请求到数据
去掉代码中,定义的后端的常量域名:“https://back.example.cn/”
使后端接口请求地址自动补充为本地服务“http://dev.example.cn” , proxy 代理到测试环境的统一域名请求地址,例如:“https://web.leke.cn”

内容补充

透过这个网站可以检查当前自己的浏览器是否已经更新为最新版本的SameSite规则,全部为绿色则为已开启新规则。
https://samesite-sandbox.glitch.me/在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值