讲师中心 微信公众号
AI工具推荐 视频效率加速

谷歌浏览器跨域请求失败是什么原因

老晨君_8202

老晨君_8202

发布时间:2026-08-02 12:44:19

|

598人浏览过

|

来源于php中文网

原创

谷歌浏览器跨域请求失败是因同源策略与Chrome 94+新增的PNA双重拦截:前者阻止协议、域名、端口任一不同的请求,后者禁止HTTP页面访问localhost等私有地址,需同时配置CORS响应头、禁用web安全或关闭PNA策略才能解决。

谷歌浏览器跨域请求失败是什么原因

谷歌浏览器跨域请求失败,是因为浏览器强制执行同源策略(Same-Origin Policy)——当你的前端页面运行在 http://localhost:3000,却试图用 JavaScript 向 http://api.example.com 发起 fetch 或 XMLHttpRequest 请求时,只要协议、域名、端口三者中任一不同,浏览器就会在响应到达脚本前直接拦截,控制台抛出 “Access to XMLHttpRequest has been blocked by CORS policy” 报错,而 Network 面板里该请求仍显示 200 状态码,说明服务端已正常响应,只是数据被浏览器截断了。

根本原因:同源策略与PNA双重拦截

同源策略是浏览器安全基石,防止恶意网站窃取用户在其他站点的敏感数据(如 Cookie、LocalStorage)。但自 Chrome 94 起,新增 Private Network Access(PNA)规范,进一步限制“不安全上下文”(即 HTTP 页面)访问“更私有地址空间”(如 127.0.0.1、localhost、内网 IP)的资源。此时即使后端已返回 Access-Control-Allow-Origin: *,Chrome 仍会在预检阶段拒绝请求,并报错 “The request client is not a secure context and the resource is in more-private address space”。

这导致两类典型失败场景:一是本地 HTML 文件双击打开(file:// 协议),二是开发服务器用 HTTP 协议(http://localhost:3000)调用 http://localhost:8080 的 API。

验证是否真为跨域拦截

第一步:打开 Chrome DevTools → Console 面板,确认错误信息是否含 “CORS policy” 字样。

第二步:切换到 Network 面板,找到对应请求,检查 Status 列是否为 (blocked:cors) —— 这是浏览器层面拦截的明确标识,而非网络或后端问题。

第三步:点击该请求 → Headers 标签页 → 查看 Response Headers 中是否存在 Access-Control-Allow-Origin。若不存在,说明后端未配置 CORS 响应头;若存在但依然报错,则大概率是 PNA 或命令行参数未生效所致。

快速排除法:先试插件再试命令行

方法一:安装 CORS Unblocked 扩展
打开 chrome://extensions/ → 开启“开发者模式” → 访问 Chrome 应用商店搜索并安装 CORS Unblocked → 点击右上角拼图图标 → 找到该插件 → 点击开关启用 → 在弹出面板中将模式设为 Enable CORS → 刷新页面。

方法二:命令行启动独立调试会话
① 彻底关闭所有 Chrome 进程(Windows:任务管理器 → 结束全部 chrome.exe;macOS:活动监视器 → 强制退出所有 Google Chrome 实例);
② 执行命令:
Windows:chrome.exe --user-data-dir="C:\ChromeDevSession" --disable-web-security
macOS:open -n -a "Google Chrome" --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security;
③ 新窗口地址栏下方出现黄色提示条“您使用的是不受支持的命令行标记”,即表示成功。

谷歌MaterialDesign侧边栏特效
谷歌MaterialDesign侧边栏特效

谷歌Material Design侧边栏特效是一款基于jQuery+HTML5实现的鼠标滑过右侧滑出选项卡切换全屏特效

下载

【必须使用全新的 --user-data-dir 路径,重复使用旧路径会导致 --disable-web-security 完全失效】

新版 Chrome(≥108)特有拦截:PNA 设置必须关闭

若上述方法无效,且你使用的是 Chrome 108 或更高版本(当前最新稳定版为 116+),请立即执行以下操作:

第一步:在地址栏输入 chrome://flags/#block-insecure-private-network-requests 并回车;

第二步:找到 “Block insecure private network requests” 选项;

第三步:点击右侧下拉菜单,选择 Disabled;

第四步:点击右下角 “Relaunch” 重启浏览器。

这一步不可跳过。Chrome 101 后全面启用 PNA,仅禁用同源策略无法绕过该层拦截。未关闭此项,即使后端加了 CORS 头、插件已启用、命令行参数正确,请求仍会被静默阻止。

相关文章

谷歌浏览器
谷歌浏览器

谷歌浏览器Google Chrome是一款可让您更快速、轻松且安全地使用网络的浏览器。Google Chrome的设计超级简洁,使用起来得心应手。这里提供了谷歌浏览器纯净安装包,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

80

2026.09.23

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

40

2026.09.23

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

20

2026.09.23

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

20

2026.09.22

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法,讲解Profile、Settings、Options及Package ID的作用,帮助管理不同平台和编译环境下的包版本。

40

2026.09.22

Conan私有仓库搭建教程
Conan私有仓库搭建教程

本专题系统的讲解Conan私有仓库的搭建流程,涵盖仓库服务部署、存储目录配置、用户认证、权限划分和远程地址添加,并介绍内部C++依赖包的上传、下载及版本维护方法。

40

2026.09.22

loomy官网入口地址合集
loomy官网入口地址合集

本专题汇总了 Loomy 桌面 AI 助理的官方入口地址合集及使用指南。提供 macOS 与 Windows 客户端下载 。Loomy 是讯飞推出的桌面级 AI 工作搭子,支持文件整理、数据分析、网页操作及通过飞书/钉钉远程操控电脑,助你高效完成本地办公任务 。

40

2026.09.22

NumPy常见函数使用方法
NumPy常见函数使用方法

本专题整理 NumPy 常见函数使用方法相关教程,覆盖函数大全、参数用法、数组运算、统计聚合、排序处理、where 条件筛选、linspace 创建数列等常用场景,帮助读者快速掌握 NumPy 函数调用思路和实际数据处理技巧。

60

2026.09.22

NumPy性能优化版本更新与常见报错排查
NumPy性能优化版本更新与常见报错排查

本专题整理 NumPy 性能优化、版本更新与常见报错排查相关教程,覆盖向量化计算、广播性能、内存布局、NumPy 2.0 升级、版本兼容冲突、安装导入报错、dtype 溢出、矩阵运算异常和 broadcasting 报错修复,帮助读者系统掌握 NumPy 性能调优与问题定位方法。

80

2026.09.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn