Chrome 开发环境快速屏蔽 CORS 跨域限制【超详细教程】
📢 为什么需要临时屏蔽 CORS？
在日常前后端开发中，我们经常会遇到这样的报错：
Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000'
has been blocked by CORS policy.
或者类似：
Access to XMLHttpRequest at 'https://172.x.x.52/api/info' from origin 'http://172.x.x.1:4324'
has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
🌟 跨域产生的原因
这是因为现代浏览器基于安全考虑，启用了同源策略。如果前端请求的接口和前端页面的协议、域名、端口三者中任意一个不同，就会被视为「跨域」。如果后端没有正确返回 Access-Control-Allow-Origin，浏览器就会直接拦截。
但是！开发阶段，我们只是想调试前端功能，接口跨不跨域其实无所谓。浏览器的这个限制，反而影响了我们的效率。
所以很多人会问：能不能关闭这个限制？
答案是：能。但**仅限开发阶段使用！**生产环境要规范通过 Nginx 代理或后端 CORS 配置解决。
🚀 Chrome 临时关闭跨域限制（CORS）
我们可以单独创建一个专门用于开发的 Chrome 实例，启动时临时关闭 CORS 安全策略，不影响你日常正常用的浏览器。
✅ 详细步骤
1️⃣ 创建一个专用文件夹（用于保存临时浏览器数据）
在桌面新建一个文件夹，例如命名为：ChromeDev
2️⃣ 复制一个 Chrome 快捷方式
原路径一般在：
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
- 找到这个 Chrome 快捷方式，右键复制
- 粘贴到桌面，重命名为：
ChromeDev
3️⃣ 修改快捷方式启动参数
- 右键
ChromeDev→ 选择属性 - 在【目标（Target）】一栏，原来是这样：
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
在后面追加以下内容：
--disable-web-security --user-data-dir=C:\Users\你的用户名\Desktop\ChromeDev
替换成你自己的用户名和路径。
最终效果示例：
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\Users\YourName\Desktop\ChromeDev
✅ 点击 应用 → 确定。
🚩 如何使用
- 正常使用浏览器：用你平时的 Chrome。
- 开发临时跨域：双击
ChromeDev快捷方式。 - 效果：该实例下，不再受 CORS 限制，所有跨域请求直接放行。
🔔 注意事项
| 方法 | 适用场景 | 优缺点 |
|---|---|---|
| Chrome 快捷方式（本教程） | 本地开发 / 跨域调试 | ✅ 不影响主浏览器，❌ 仅限本地，不要用于生产环境。 |
⚠️ 警告：该方法关闭了浏览器的安全限制，只在本地调试用，不要用于生产环境！
💡 其他解决方案（推荐生产使用）
| 方案 | 场景 | 说明 |
|---|---|---|
| CORS | 后端控制跨域 | 后端返回正确的跨域响应头。 |
| 代理转发 | 本地开发 | Vue / React 本地代理，或 Nginx 转发跨域。 |
| JSONP | 仅限 GET | 老方法，已较少使用。 |
推荐优先顺序：
1️⃣ 代理转发（开发）
2️⃣ CORS 配置（生产）
🔚 总结
- Chrome 快捷方式方法，非常适合日常快速调试接口。
- 不要用于线上，避免安全隐患。
- 正式上线请使用：后端 CORS / 网关代理 / Nginx。
🎁 你可以把这篇收藏起来，方便随时用！
点赞 + 收藏 + 分享，一起告别 CORS 烦恼！