[指南] 前端工程师开发必备的 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


按赞加入粉丝团

延伸阅读