[指南] 前端工程師開發必備的 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

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

// 建立一個 Heroku App
heroku create <你的 app 名稱，如果沒輸入那就隨機生成的代碼>

// 將專案推到 heroku 上
git push heroku master

// 建立一個 Heroku App

heroku create <你的 app 名稱，如果沒輸入那就隨機生成的代碼>

// 將專案推到 heroku 上

git push heroku master

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

參考資料

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

按讚加入粉絲團

使用方法

參考資料

延伸閱讀