chrome不同版本出现的跨域问题及解决方案

chrome 94 版本开始,不允许公网页面调用局域网接口或局域网非同域名静态资源。

局域网网段:

A类网:10.0.0.0 ~ 10.255.255.255

B类网:172.16.0.0 ~ 172.31.255.255

C类网:192.168.0.0 ~ 192.168.255.255

部分 的实例机器是 11.xxx.xxx.xxx 网段,虽然是在公司内网才可以访问,但不符合规范中的局域网网段,在 chrome 浏览器中会被判定为公网。

页面调用跨域接口情况如下:

情况1:局域网中的页面访问局域网中的跨域接口,不受 chrome 94 这次更新的影响

情况2:公网中的页面访问局域网中的跨域接口,就算后端服务器允许了该网页域名跨域,也无法访问通

情况3:公网中的页面访问公网中的跨域接口,不受 chrome 94 这次更新的影响

情况4:局域网中的页面访问公网中的跨域接口,不受 chrome 94 这次更新的影响

注意:在平时配置 host 进行测试的时候,可能会出现前端域名的 host 绑的实例 ip 是 11.xxx.xxx.xxx 类型,而后端域名的 host 绑的实例 ip 是 10.xxx.xxx.xxx 类型,属于情况2,会无法调通跨域接口,解决方法如下:

方法一:后端申请公网预发域名,这样域名的 vip 是公网 ip,就形成前端公网页面访问后端公网跨域接口的情况(情况3)

方法二:后端换机器,将机器换成 11.xxx.xxx.xxx 的机器,也会形成前端公网页面访问后端公网跨域接口的情况(情况3)

方法三:前端换 10.xxx.xxx.xxx 的机器,形成前端局域网页面访问后端局域网跨域接口的情况(情况1)

方法四:将 chrome 的这个限制关闭,具体操作如下:在 chrome 地址栏中输入 chrome://flags/ ,回车访问,按 Ctrl + F,输入 Block insecure private network requests 进行搜索,找到该配置项,将其设置为 disabled

方法四:
1.在Chrome浏览器中打开网址chrome://flags/
2.107及以下版本:找到Block insecure private network requests配置,将默认配置由default改为disabled
3.108及以上版本:找到 unsafely-treat-insecure-origin-as-secure配置,输入框输入http://333.ppzh.jd.com,将默认配置由disabled改为enable
4.重启浏览器即可

在这里插入图片描述

配置 host 进行测试的时候,也可能出现前端域名的 host 绑的实例 ip 是 10.xxx.xxx.xxx 类型,而后端域名的 host 绑的实例 ip 是 11.xxx.xxx.xxx 类型,则属于情况4,不受影响。

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以及其他解决方案,网页开发者可以更轻松地处理跨域请求,并提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值