Vue.jsアプリでAPIのCORSの壁を越える方法

開発環境でローカルAPIとデータ通信をする時

開発環境で、localhostで配信しているAPIからデータを取得しようとすると、Vue.jsをライブロードしているサーバーのパス（多くがlocalhost:8080）と、ローカルAPIのURLが異なるため、CORS（同一オリジンポリシー）に引っかかって、ローカルAPIからデータが取得できません。

その場合は、Vue.jsのdevServer機能でCORSの壁を超えられます。

devServer機能は、vue.config.jsに下記のように追加すればOKです。

module.exports = {
  devServer: {
    proxy: 'http\://localhost:1313'
  }
}

上記の例では、Vue.jsアプリ内に存在しないファイルをリクエストした場合はすべて、ドメイン部分を「http://localhost:4000」に書き換えてプロキシーします。

例えば、APIからcategory.jsonというファイルをaxiosで取得するとします。

Vue.jsアプリ上では、こんな感じで読み込むでしょう。

await axios.get('/category.json')
        .then((res) => {
        	// 何か処理
        }).catch((e) =>{
          console.log(e);
        });

「http://localhost:8080/category.json」というファイルはVueアプリ内にないため、「http://localhost:1313/category.json」をリクエストしてproxyして（http://localhost:8080のフリをして）返してくれます。

あとは、APIサーバーを「http://localhost:1313」で立ち上げれば、Vue.jsアプリとAPIサーバーを同時に開発できるというわけです。

今回の例では、本番環境が同一ドメインを想定しているので、ドメインが違う場合は、Vue.jsのアプリ側で環境変数に応じてURLを切り替えて使うなど、工夫が必要です。

詳しい設定は、http-proxy-middlewareプラグインのレポジトリをどうぞ。

chimurai / http-proxy-middleware | Github

本番サーバーでCORSの壁を超える場合

Vue.jsのdevServer機能は、vue cli serveで動くので、本番環境では使えません。それでは、本番サーバーでCORSの壁を越えられない外部APIサービス(GoolgeのAPIなど)使う場合はどうしたら良いでしょうか。

外部APIの場合、Javascriptで使う前提のサービスはCORSのオリジンを「*(すべて)」にしているところもありますが、すべてがそういうわけではありません。

そうした場合は、APIサーバー側でリクエストをリライトしてしまうのが一番簡単です。

Netlifyの場合

自分の場合は、WebアプリはNetlifyで配信することが多く、Netlifyでは、NginxなどWebサーバーのProxyが使えないので、Netlifyのrewrite機能を使って対処しています。

## netlify.toml
[[redirects]]
  from = "/search"
  to = "https://api.hogehoge.com/search?q=:q"
  status = 200
  force = true
  query = {q = ":q"}

こんな感じですね。

Netliyのリライトやリダイレクトについては、公式サイトに詳細なドキュメントがあります。

Redirects and rewrites | Netlify

日本語なら下記のページがまとまっています。

NetlifyのRedirect、Reweiteルールの書き方・処理方法まとめ

Cloudflare WorkersでCORS Proxyする

CDNサービス・CloudflareのエッジサーバーでJavascriptを実行できる「Cloudflare Workers」でCORSをProxyする方法です。

設置方法は簡単で、Cloudflare Workersに下記の「CORS Header Proxy」のソースコードを記述したWorkerをあげるだけです。あとは、「Cloudflare Workerドメイン/corsproxy/?apiurl=APIのURL」にリクエストすると、APIのデータをProxyしてくれます。

CORS Header Proxy

やってることはシンプルで、GETパラメータ「apiurl」のURL（外部API）へCloudflare Workersがリクエストを飛ばして、受け取ったレスポンスに「access-control-allow-origin：Cloudflare Workersのドメイン」を付与して返答してるだけです。

Cloudflare Workersは無料プランでも1日10万リクエストまで処理できますし、一つのWorkerを複数のドメインに紐づけることも簡単にできるので、非常に汎用性が高くて使い勝手がいいのですが、問題もあります。

というのも、相手先のAPIサーバーがCloudflare Workersからのアクセスを不正リクエストと見なすことがチラホラあって（特に大手サービスでは）、400 Bad Requestが返ってきてしまうこともあります。

その意味では万能な方法ではないので、外部APIサービスによって使い分ける形になりそうです。

Cloudflare Workersの使い方は、下記をどうぞ。

無料で使えるエッジコンピューティングサーバー・Cloudflare Workersで簡易APIを立ててみる

Vue.jsアプリでAPIのCORSの壁を越える方法をまとめてみました。

もちろん方法はこれだけではありませんが、手っ取り早く、かつ開発環境と本番環境の共有で使える方法としては、お手軽なので、ぜひ試してみてください。