Chrome 开发环境屏蔽 CORS 跨域限制

摘要：本文介绍在Chrome开发环境中临时关闭CORS跨域限制的方法。通过创建专用Chrome实例，在快捷方式目标地址后添加--disable-web-security参数，并指定独立用户数据目录，可解决开发时的跨域报错问题。该方法仅限本地开发使用，不影响正常浏览器，同时对比了CORS、代理转发和JSONP等其他跨域解决方案的适用场景。使用后浏览器顶部会显示安全警告，提醒用户不要在生产环境使用此方

可缺不可滥

843人浏览 · 2025-07-22 10:12:34

可缺不可滥 · 2025-07-22 10:12:34 发布

Chrome 开发环境屏蔽 CORS 跨域限制

为何要屏蔽CORS跨域

日常开发过程中，经常会遇到请求接口如下的报错问题

Access to fetch at 'https://xxx' from origin 'http://localhost:4221' 
has been blocked by CORS policy.

有好些解决CORS跨域问题的方式，这里提供一种前端开发修改Chrome 命令的方式，来跳过CORS跨域报错。

Chrome 临时关闭 CORS跨域报错

我们可以单独创建一个专门用于开发的 Chrome 实例，启动时临时关闭 CORS 安全策略，不影响你日常正常用的浏览器。

创建一个新的浏览器快捷方式 Google Chrome Dev
重新配置这个复制快捷方式的target 地址
鼠标右键快捷方式，点击属性

在原本target 值的后面追加内容示例如下：

--disable-web-security --user-data-dir=C:\Users\你的用户名\Desktop\Google Chrome Dev

完整target示例如下

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\Users\xi_deng\Desktop\Google Chrome Dev

正常启动 Google Chrome Dev
在浏览器上方出现提示，就表示已经启动成功了

注意事项

不影响主流浏览器，仅限本地开发，不要用在成产环境。

跨域的其他处理方式

方案	场景	说明
CORS	后端控制跨域	后端返回正确的跨域响应头。
代理转发	本地开发	Vue / React 本地代理，或 Nginx 转发跨域。
JSONP	仅限 GET	老方法，已较少使用。