谷歌浏览器跨域请求被阻止怎么办

云浩同学_7244

云浩同学_7244

2026-08-16

216人浏览

原创

谷歌浏览器cors跨域报错的解除方法有五种:一、命令行禁用同源策略;二、安装cors扩展;三、配置开发服务器反向代理;四、调整fetch请求规避预检;五、启用不安全源信任参数。

谷歌浏览器跨域请求被阻止怎么办

你在本地开发前端项目时点击按钮调用后端接口,控制台立刻弹出红色报错“Access to XMLHttpRequest has been blocked by CORS policy”,Network面板里能看到请求已发出、服务器返回了200状态码但被标为(blocked:cors),说明浏览器在响应到达JavaScript前就切断了数据通路,必须让请求绕过或骗过这道安检。

命令行启动无安全限制会话

第一步:彻底关闭所有Chrome进程。Windows用户打开任务管理器→“详细信息”页签→结束全部chrome.exe;macOS用户打开活动监视器→搜索“Google Chrome”→选中全部实例→强制退出。这一步漏掉任一后台进程,后续命令都会失效。

第二步:执行对应系统命令,【必须使用全新的--user-data-dir路径,重复使用旧路径将导致--disable-web-security完全不生效】。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;Linux示例:google-chrome --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

第三步:新窗口启动后,若地址栏下方出现黄色提示条“您使用的是不受支持的命令行标记”,即表示同源策略已禁用成功。此时可直接打开本地HTML文件或访问localhost不同端口的API,CORS拦截消失。

安装可信CORS扩展快速放行

方法一:打开Chrome网上应用店,搜索并安装CORS Unblocked(开发者Ritwick Dey)或Allow CORS: Access-Control-Allow-Origin。

方法二:点击浏览器右上角拼图图标→找到刚安装的插件→点击右侧开关启用。注意:部分新版Chrome要求先点击插件图标,在弹出面板中手动将模式切换为“Enable CORS”,否则开关看似开启但实际未生效。

方法三:刷新当前页面,观察控制台是否清除CORS报错。该方案不修改浏览器底层策略,仅对匹配域名的响应头注入Access-Control-Allow-Origin: *,适合日常轻量调试。

配置开发服务器反向代理

① 若使用Vite,在vite.config.ts中添加proxy配置块:

proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } }

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

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

下载

② 若使用Vue CLI,在vue.config.js中写入:

devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, secure: false } } }

③ 若使用Create React App,需创建src/setupProxy.js文件,内容为:

const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use(createProxyMiddleware('/api', { target: 'http://localhost:5000', changeOrigin: true })); };

这个方法从请求源头规避跨域判定——浏览器看到的是http://localhost:3000/api/user,开发服务器悄悄把/api开头的请求转发到真实后端,整个过程对前端代码透明,也不触发预检请求。

启用不安全源信任参数(私有网络访问)

新版Chrome默认阻止前端页面访问私有网络(如http://192.168.1.100:8080),即使加了--disable-web-security也无效。必须额外启用私有网络访问权限。

Windows用户:在Chrome快捷方式属性→“目标”末尾追加 --enable-features=PrivateNetworkAccessRespectPreflightResults(注意前面留一个空格)。

macOS/Linux用户:终端命令改为open -n -a "Google Chrome" --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security --enable-features=PrivateNetworkAccessRespectPreflightResults

这一步不做,访问内网设备API时仍会卡在net::ERR_FAILED,且控制台无明确CORS提示,容易误判为网络不通。

相关文章

谷歌浏览器
谷歌浏览器

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

下载

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

相关专题

更多
Vibeknow在线使用入口合集
Vibeknow在线使用入口合集

本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程,涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作,并整理了免费版水印规则与手机端浏览器访问指南,助你快速将知识内容视频化。

2026.09.21

0

20

NumPy随机数文件读写与dtype数据类型
NumPy随机数文件读写与dtype数据类型

本专题整理 NumPy 随机数、文件读写与 dtype 数据类型相关教程,覆盖 Generator/random、随机数种子、正态分布采样、npy/npz/CSV/TXT 保存读取、loadtxt/savetxt、memmap、大文件处理、astype 类型转换、结构化 dtype、整数溢出和精度丢失等场景。

2026.09.21

0

24

NumPy矩阵运算与线性代数计算
NumPy矩阵运算与线性代数计算

本专题整理 NumPy 矩阵运算与线性代数计算相关教程,覆盖矩阵乘法、dot 与 @ 运算符、逆矩阵、行列式、特征值与特征向量、SVD、线性方程组、欧氏距离、矩阵分解和大规模矩阵性能优化等内容,帮助读者掌握 np.linalg 与矩阵计算实战。

2026.09.21

0

20

NumPy广播机制数学运算与统计分析
NumPy广播机制数学运算与统计分析

本专题整理 NumPy 广播机制、数组数学运算与统计分析相关教程,覆盖广播规则、维度对齐、矩阵与数组加减除法、向量化计算、均值方差、分位数、中位数、直方图和 unique 频次统计等场景,帮助读者掌握 ndarray 高效计算与统计处理方法。

2026.09.21

0

17

NumPy数组创建索引切片与数据选择
NumPy数组创建索引切片与数据选择

本专题整理 NumPy 数组创建、索引、切片与数据选择相关教程,覆盖 np.array、zeros/ones、多维数组形状、基础切片、花式索引、布尔索引、条件筛选、视图与副本等常用场景,帮助读者系统掌握 ndarray 数据构造与高效提取方法。

2026.09.21

0

12

Aionclaw智能助手介绍
Aionclaw智能助手介绍

本专题汇总了AionClaw(AI龙虾助手)的功能介绍与在线使用入口。AionClaw是杭州趣猿人工智能有限公司推出的桌面级AI智能体,能直接在电脑上读写文件、运行脚本、操作浏览器,自动交付Word、PPT、Excel等成品。

2026.09.20

20

13

AionClaw AI智能体与电脑自动化任务执行功能使用教程
AionClaw AI智能体与电脑自动化任务执行功能使用教程

AionClaw专题整理AI智能体与电脑自动化相关功能使用教程,涵盖安装部署、AI任务执行、Skills技能、文件处理、浏览器控制、电脑操作、持久记忆、聊天工具连接以及办公、编程和内容创作等功能,帮助用户快速掌握AionClaw的实际使用方法。

2026.09.20

0

15

AI视频生成软件推荐
AI视频生成软件推荐

本专题汇总了当前主流的AI视频生成软件推荐与排行榜单,涵盖seko、AniShort、剧云、Lovart、LiblibAI及立刻mv等热门工具。同时整理了各软件在文生视频、图生视频、时长限制、画质表现及免费额度等方面的差异对比,助您快速选对适合创作需求的AI视频生成工具。

2026.09.16

200

9

ai生成视频的工具免费版合集
ai生成视频的工具免费版合集

本专题汇总了当前免费AI生成视频工具的排行榜与推荐清单,涵盖seko、讯飞智作、AniShort及剧云、Lovart等多模型集成平台。同时整理了各工具的免费额度、输出时长、水印政策及适用场景差异,助您快速选择合适工具开启AI视频创作。

2026.09.16

100

10

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
phpMyAdmin 常见问题
phpMyAdmin 常见问题

共0课时 | 0人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习