如何解决谷歌浏览器中CORS跨域资源共享报错问题?

小辰大大_4339

小辰大大_4339

2026-06-08

1012人浏览

原创

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

如何解决谷歌浏览器中cors跨域资源共享报错问题?

当你在谷歌浏览器中调试前端项目时,发现控制台反复报出“Access to XMLHttpRequest has been blocked by CORS policy”红色错误,而接口实际已返回数据(可在Network面板看到200状态但标有blocked:cors),说明浏览器因同源策略拦截了响应内容,必须通过配置让请求被识别为合法跨域或绕过判定。

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

第一步:彻底关闭所有Chrome进程,包括后台残留的渲染进程和GPU进程。Windows用户可在任务管理器“详细信息”页签中结束全部chrome.exe;macOS用户需在活动监视器中搜索Google Chrome并强制退出全部实例。

第二步:按系统执行启动命令,【必须指定全新的--user-data-dir路径,否则禁用无效】。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。

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

安装可信CORS扩展快速启用

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

方法二:点击浏览器右上角拼图图标→找到对应插件→点击右侧开关启用。注意:部分新版Chrome要求先点击插件图标,在弹出面板中手动将模式切换为“Enable CORS”,否则仅显示灰色按钮但未真正生效。

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

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

配置开发服务器反向代理(推荐长期使用)

Vite项目:打开vite.config.ts,在server.proxy下添加配置块:

proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } }。这会让所有以/api开头的请求被Vite开发服务器截获,并转发至后端真实地址,浏览器始终认为请求目标是同源的http://localhost:3000/api,从而彻底规避预检与响应头校验。

Create React App项目:在package.json中直接添加字段:"proxy": "http://localhost:8080"。无需额外安装插件或修改代码,保存后重启dev server即可生效。

Vue CLI项目:在vue.config.js中配置devServer.proxy,格式与Vite一致。此方法从请求源头消除跨域判定,无需服务端配合,且不会降低浏览器安全性,适合团队协作开发环境。

相关文章

谷歌浏览器
谷歌浏览器

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

下载

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

相关专题

更多
DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

20

12

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

2026.11.05

20

12

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

2026.11.04

20

16

XORM框架结构体映射与表结构同步
XORM框架结构体映射与表结构同步

本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

2026.11.04

20

15

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

15

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

16

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

16

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

本专题梳理XORM框架的入门路径,从框架定位、依赖安装、连接数据库到跑通第一个增删改查示例,讲清Engine初始化、日志开启与项目目录规划,并对比GORM等同类ORM的差异,帮助Go开发者建立整体认知。

2026.11.04

0

15

Docker Desktop怎么设置端口映射
Docker Desktop怎么设置端口映射

本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

2026.11.03

40

18

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程