如何使用Chrome套件解決Localhost開發中的CORS問題 – 前端無痛解決 CORS Error 問題

後端設定好後，前端始終出現 CORS Error 問題

不論你是採用現代的前後端分離架構( React.js , Vue.js , Angular.js )，還是採用傳統的JQuery, PHP , ASP.net，你都有可能在專案上遇到 CORS Error。

繼之前提到 CORS 是什麼? 解決本地端跨域請求 CORS Error 後，在FB社群上看到有人在請後端設定後，前端 call API 依舊會出現 CORS 問題。

上篇提到的使用 chrome 超連結，並在裡面中塞入一堆代碼來執行，但在少數情況下此方法仍然會失效，比如當你的電腦不具備管理者權限時，就無法使用此方法。

這時你在網路上搜尋相關解法，一眼望去基本解法不外乎3種:

1. 請設定 Access-Control-Allow-Origin…
2. 請使用 proxy server，在Node.js 中加入….
3. CORS Error 是後端的事情，跟你前端無關

在你將上述方法都一一試過後，可能又礙於專案因素，如

• 專案屬於多線開發，非自己能動
• 你剛接手維護專案，權責分工碰不到那
• 電腦公司統一管理，你連執行權限都沒有
• 你是新手 or 沒碰過，這事壓根不懂
• 你周圍問了一圈，周圍人還是 google 前三頁，跟你說上述三種方法

導致你將網路上查詢的方法用盡，試到近乎懷疑人生的階段，CORS Error 問題依舊紋絲不動。

解決思路

這時你會想問，那還有沒有更快、更簡單的方式，無需使用 NPM 安裝，也不必 js code，更不需具備管理者權限，就可以輕鬆解決 CORS Error 問題呢?

解法思路其實很簡單 – 【方法不夠，套件來湊】，你問 Google 搜尋問不到，你可以問 Google 擴充阿，秉持【你遇到的問題，世界上絕對不會只有你遇到】，只要問題不是太刁鑽、太特殊，一定有人會對此推出相關解法。

如何無痛解決前端 CORS Error

這裡我們來介紹一個 chrome 的擴充功能，也是我們此次的主角【EASY CORS】，這款擴充功能，就如它的名字一樣，使用起來非常簡單，它能快速地幫你解決前端面臨的 CORS ERROR。

接下來跟著步驟走，在後端也設定好的前提下，前端也能輕鬆擺脫 CORS Error 問題。

到這邊，你就可以開始測試程式了，正常來說，你將不再受到 CORS Error的惱人訊息，如果還有出現，請回頭檢查看看後端是否有設定允許跨域。