---

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 煩惱！