[指南] 前端工程師開發必備的 Heroku + Node.js 佈署自己的 CORS 轉址伺服器

章節連結

執行各種前端開發任務時,或是想要自行串接第三方 API,往往會遇上 CORS 的問題,導致開發上的瓶頸。在過往有 CORS-Anywhere 可以提供協助,但現今這個方便的服務因安全性原由,官方所提供的自動 CORS Proxy 服務已經失效,每次在開發時得先授權過,方能存取一段時間。但透過 Heroku 所提供的免費資源,可以自己輕鬆架一個。
heroku


使用方法

1. 安裝 Node.js,可以上官方下載。安裝完畢後運用終端機輸入 npm -v  和 node -v 來查看是否可以成功看到版本號
2. 安裝 Heroku CLI ,安裝完畢後運用終端機輸入 heroku -v 來查看是否可以成功看到如同右方的文字:heroku/7.50.0 win32-x64 node-v12.16.2
3. 在終端機中,輸入 heroku login ,並依照命令列上的指示,輸入帳號和密碼。如果你是使用 MFA 兩步驟認證的,別忘了在密碼欄是輸入 API Key
heroku settings


4. 將 CORS-Anywhere 的專案 clone 到自己的電腦上 ( git clone https://github.com/Rob–W/cors-anywhere.git ),並進入專案根目錄輸入 npm i
5. 創造一個自己的 heroku app,並將其透過 git 上傳到 heroku

6. 這樣就完成了。試用的方法就是將先前跨網域取資料會回傳 CORS 錯誤的網址,修改為下方格式:
<你的 heroku app 網址>/<目標網址>


參考資料

1. Fixing the CORS error by hosting your own proxy on Heroku

按讚加入粉絲團

延伸閱讀