前端请求跨域，原来是谷歌浏览器的限制

最新推荐文章于 2024-03-20 20:20:02 发布
最新推荐文章于 2024-03-20 20:20:02 发布
阅读量922 收藏 1
点赞数 1
分类专栏： 个人积累 文章标签： html5 javascript react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30627241/article/details/127631139
版权

有一个后台项目，来公司以来没有接触过这个项目，最近接到这个项目的需求，今天启动项目准备开发，登录的时候遇到跨域问题，使用谷歌打开，报了如下跨域问题：

Access to XMLHttpRequest at ‘http://yhjr-b-dev.yhjr-bd-bservice.devgw.yonghui.cn/login/getSmsCode’ from origin ‘http://0.0.0.0:8083’ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private.

在这里插入图片描述
在这里插入图片描述
先排查的前端，后跟后端和运维一起排查，最后发现是升级了谷歌浏览器，浏览器自带了一个Block insecure private network requests 防止不安全的上下文向更私有的IP地址发出子资源请求，所以更改一下这个设置就可以了，如下：

  1. 网址地面输入：chrome://flags/
    在这里插入图片描述

  2. 在Search flags 里面搜索Block insecure private network requests
    在这里插入图片描述

  3. 把default 修改为Disabled，下面会弹出提示：
    在这里插入图片描述

  4. 点击relaunch,重启浏览器：
    在这里插入图片描述
    重启过后重新请求就可以了，完美搞定，如下：
    在这里插入图片描述

warm-summer
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cross-request 3.1 YApi 跨域请求 谷歌浏览器
10-10
cross-request 3.1 YApi 跨域请求 谷歌浏览器
（转）Chrome浏览器解决本地文件跨域（加载失败）问题及Access to XMLHttpRequest at ‘file:报错解决办法
CaseyWei
08-09 5407
1.右击桌面的谷歌快捷方式选择‘新建快捷方式’，创建一个新的 2.右击谷歌快捷方式选择属性，打开属性窗口 3.在目标中的原有地址后面加上+ 空格+‘--user-data-dir="c:\ChromeDebug" --test-type --disable-web-security’ 4.因为启动参数中增加了--user-data-dir="c:\ChromeDebug"，表示Chrome会从c:\ChromeDebug中存取用户数据，因该目录可能为空...
解决新版本chrome浏览器跨域请求拦截，前端入门你值得拥有
最新发布
m0_61408947的博客
03-20 279
2.在属性页面中的目标输入框里加上【这里的空格不要忘了】 --disable-web-security --user-data-dir=C:\MyChromeDevUserData，–user-data-dir的值就是刚才新建的目录。3.点击应用和确定后关闭属性页面，并打开chrome浏览。
ajax请求本地json文件，谷歌浏览器报跨域错误
qq_34425377的博客
04-11 5422
前端在做页面的时候，有时候需要可能为了测试某一功能，或者为了自己做demo，会访问本地json文件，获取数据，进行处理；但最近发现使用ajax请求json文件的时候，谷歌浏览器报错如下： Access to XMLHttpRequest at ‘file:///…’ from origin ‘null’ has been blocked by CORS policy: Cross origin r...
chrome浏览器请求失败,Access to XMLHttpRequest at ‘http://localhost:8080/sockjs-node/info?t=........
MXDMAX的博客
03-24 4260
用内网穿透做支付宝支付时，直接用本地线下的地址没问题，后面用内网穿透的地址测试，发生以下问题： 本身前后的项目的跨域问题使用Nginx已经解决，后面查了一下，是谷歌浏览器的设置问题，解决方案： 1.在浏览器地址栏输入： chrome://flags/#block-insecure-private-network-requests 2.将下面这个功能禁用 Block insecure private network requests 3.重启浏览器，再次发送请求，就成功了！ ...
Access to XMLHttpRequest at file from origin ‘null‘ has been blocked by CORS policy谷歌浏览器本地打开项目js文件报错
了迹奇有没
02-14 5264
CORS 策略已阻止从源“null”访问“文件路径”处的 XMLHttpRequest：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。
Block insecure private network requests
SeriousLose
03-10 1万+
不安全的私有网络访问 chrome更新到94之后，会自动阻止发送不安全的 内网 请求（参考资料） 复现问题 从 微盟 发送请求到 http://localhost:8009 的时候，就会被阻止，并且报这样的错: net::ERR_FAILED (ERR_FAILED)(How to fix Chrome block your insecure private network requests) 报错 Access to fetch at ‘...’ from origin ‘’ ha..
谷歌 Access to XMLHttpRequest at ‘请求网站’ from origin ‘请求来源’ has been blocked by CORS policy: The reques
m0_37615741的博客
02-24 2243
谷歌高版本跨域问题
如何解决Chrome禁止发送不安全的内网网络请求(ERR_FAILED)(How to fix Chrome block your insecure private network requests)
drnrrwfs的博客
03-10 5664
chrome更新到94之后，会自动阻止发送不安全的内网请求 比如，你从 http://www.website.com 发送请求到 http://192.168.0.1 的时候，就会被阻止，并且报这样的错: net::ERR_FAILED Network Error (Ensure private network requests are made from secure contexts，其实就是让你把服务改成https的) 解决办法，就是关闭这个新特性，不要让它禁用 ①打开Chrome实验功能 在Ch
解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head
热门推荐
一觉睡过头的菜鸡的博客
05-30 7万+
文章目录一、问题二、问题产生的原因三、解决方法1. 问题出现在我们没有带标头，我们就带上标头2. 使用插件扩展 一、问题 当我实现前后端分离的时候，遇到了这个问题： Access to XMLHttpRequest at ‘http://localhost:8080/xxx’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is pre
chrome谷歌浏览器和firefox火狐浏览器解决跨域问题
Bruce_wjh的博客
11-22 1万+
解决谷歌浏览器和火狐浏览器的跨域问题
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
12-10
在用vue做前端开发的时候，因为一般跑vue使用的webpack自带的node服务，而我们实际要使用的数据确是后台服务器上的，所以这就涉及到服务器请求跨域的问题。本来在诸如axios之类的网络请求参数里面配置 ...
配置设备打印时，谷歌浏览器跨域配置
03-11
谷歌浏览器跨域配置，新旧浏览器的
Allow-Control-Allow-Origin-2022-11-23 谷歌浏览器跨域组件
07-11
谷歌浏览器跨域组件，Allow-Control-Allow-Origin-2022-11-23 大家共享！
spring boot配合前端实现跨域请求访问
08-30
本篇文章主要介绍了spring boot配合前端实现跨域请求访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
echarts柱状图,背景色的设置
辉生活-记录程序生活的点滴。
12-15 1万+
echarts柱状图的背景色设置方法，官方推荐的例子中是又添加一组最大值来当背景（不建议），设置backgroundStyle即可： series: [{ label: { formatter: (params)=>{ return `${this.toThousands(params.value)}` }, show: true, position: 't.
记录一下number-precision的用法
辉生活-记录程序生活的点滴。
04-14 1万+
Perform addition, subtraction, multiplication and division operations precisely using javascript Why 0.1 + 0.2 = 0.30000000000000004 1.0 - 0.9 = 0.09999999999999998 0.105.toFixed(2) = 0.1 // not 0.11 ...
npm install遇到[email protected] postinstall: `node scripts/build.js` 问题
辉生活-记录程序生活的点滴。
03-17 1万+
1、npm install遇到了 这个报错 [email protected] postinstall: `node scripts/build.js` 2、排查了下发现是因为sass安装时获取源的问题，先修改sass安装的源 3、再运行npm install就成功了 ...
git 取消当前merge合并
辉生活-记录程序生活的点滴。
05-12 4805
1、当git merge xxx 合并分支时遇到错误或者冲突，分支旁边会多出“|MERGING”这个东西 2、取消这次合并，使用“git merge --abort”命令
谷歌浏览器插件 跨域请求
07-22
要在谷歌浏览器插件中进行跨域请求，你可以使用以下方法： 1. 在插件的 `manifest.json` 文件中添加权限声明： ```json { "manifest_version": 2, "name": "My Extension", "version": "1.0", "permissions": [ "http://*/", "https://*/" ], "background": { "scripts": ["background.js"], "persistent": false }, "browser_action": { "default_popup": "popup.html" } } ``` 在上述代码中，通过 `"permissions"` 字段声明了跨域请求所需的权限，通配符 `*` 表示允许所有的 HTTP 和 HTTPS 请求。 2. 在插件的后台脚本或内容脚本中发起跨域请求。以下是使用 `XMLHttpRequest` 对象进行跨域请求的示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "http://example.com/api/data", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var response = JSON.parse(xhr.responseText); // 处理响应数据 } }; xhr.send(); ``` 在上述代码中，使用 `XMLHttpRequest` 对象发起了一个 GET 请求，地址为 `http://example.com/api/data`。请注意，由于浏览器的安全策略限制，如果请求的目标域不在插件的权限范围内，请求可能会被阻止。 3. 如果需要发送跨域请求到其他域的 HTTPS 网站，还需要在 `manifest.json` 文件中添加相应的权限声明，例如： ```json { "permissions": [ "https://other-domain.com/" ] } ``` 请确保在添加跨域请求权限时，只添加必要的权限，并且谨慎处理来自其他域的数据，以防止安全漏洞。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

warm-summer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值