フロントエンド開発時のCORSをcors-anywhereで解決する

ローカル環境で開発をしているとAPI取得時にconsoleに以下のような内容でエラー(CORS)が発生する事があります。
Access to XMLHttpRequest at '*****' from origin 'http://localhost/' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://*****' that is not equal to the supplied origin.

Chromeの場合、設定で一部のセキュリティをオフにする事でCORSを無効にする事が出来るのですが、なにやら設定しても上手くいかない事が多くなってきているし、そのままブラウジングする上でセキュリティ的にも宜しくないだろうという事で開発環境でのみ動作するものを利用したくなってきました。

cors-anywhere
https://github.com/Rob--W/cors-anywhere

こちらを開発環境のリポジトリでnpm i cors-anywhere -Dしてあげます。
そのままREADME.mdに書かれているExample通りに書いてもいいのですが、今回はvue-cliの環境で使いたかったのでその設定に基づいて書いてみます。

cors.js

const corsProxy = require('cors-anywhere');
const host = process.env.VUE_APP_CORS_HOST || 'localhost';
const port = process.env.VUE_APP_CORS_PORT || 8079;

corsProxy.createServer().listen(port, host, () => {
  console.log(`Running CORS Anywhere on ${host}:${port}`);
});

適当な場所に上記ファイルを保存し、package.jsonのnpm scriptsに実行コマンドを書きます。

package.json

{
  "scripts": {
    "corsProxy": "node -r dotenv/config npm-scripts/cors.js dotenv_config_path=./.env.development development",
    "serve": "npm run corsProxy & VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.js vue-cli-service serve --mode development"
  }
}

.env.development

VUE_APP_CORS_HOST=localhost
VUE_APP_CORS_PORT=8079

npm-scripts/cors.jsに先ほどのファイルを保存しており、且つvue-cliで利用している環境変数をcors.js上で読み込むためdotenvをdevDependenciesにインストールしておきます。

npm i dotenv -D

これで npm run serve を実行した時にCORS対策用のリバースプロキシサーバを立ち上げてVueの開発環境も立ち上がります。

APIを呼び出す箇所では以下のように書く事でリバースプロキシサーバを介してAPIにアクセスし取得する事が出来ます。

***.vue

const cors = process.env.NODE_ENV === 'development' 
  ? `http://${process.env.VUE_APP_CORS_HOST}:${process.env.VUE_APP_CORS_PORT}/` 
  : '';
// http://localhost:8079/https://********/
const path = `${cors}https://********/`;