CORSエラーの回避方法【cors-anywhereを利用してプロキシサーバーを立てる】
先日こちらのアプリを作成しました。
飲食店の検索アプリで、お店の情報は「ホットペッパーAPI」から取得しています。
このAPIを利用する際に以下のようなエラーが表示されてしまいました。
Access to XMLHttpRequest at '***' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.こちらはCORSに関するエラーです。
CORSとは、あるオリジンで動作しているWebアプリに対して、異なるオリジンのサーバーへのアクセスを許可できる仕組みのことです。
今回の場合は、「ホットペッパーAPI」へのアクセスを許可されていないため、CORSエラーが表示されたと理解しています。
この記事ではCORSエラーの回避方法をまとめていきます。
記事の内容
- Chromeの拡張機能を使用
- cors-anywhereを使用してプロキシサーバーを立てる
スポンサードサーチ
Chromeの拡張機能を使用
最初の回避方法はChromeの拡張機能を使用する方法です。
「CORS Unblock」を追加することで回避できます。
使い方は簡単で、上記のページから拡張機能を追加し、作成したアプリを確認するだけです。
お手軽ですが、ローカル環境でしか使うことができません。
今回のアプリのように公開したい場合は、次の方法を試してみてください。
cors-anywhereを使用してプロキシサーバーを立てる
プロキシサーバーとは、クライアントとサーバーの間に中継役として配置するサーバーのことです。
ローカルからではなく、プロキシサーバーを経由して「ホットペッパーAPI」にアクセスすることでCORSエラーを回避します。
プロキシサーバーを立てる際に、「cors-anywhere」を利用します。
cors-anywhereをclone
任意の場所で以下のコマンドを実行し、cors-anywhereプロジェクトを作成します。
git clone https://github.com/Rob--W/cors-anywhere.git
Herokuにデプロイ
作成したcors-anywhereプロジェクトをHerokuにデプロイします。
こちらを参考に進めていきましょう。
デプロイが完了し、ブラウザで以下のような画面を確認できたら、プロキシサーバーの構築は完了です。
APIを呼び出すためのURLを変更
プロキシサーバーの構築ができたら、公開したいアプリに戻り、APIを呼び出しているURLを変更します。
作成したプロキシサーバーのURL + APIを呼び出すためのURL
となるように変更してください。
自分の場合は、
- プロキシサーバー：https://cors-suzuki-app.herokuapp.com
- APIを呼び出すURL：http://webservice.recruit.co.jp（省略）
だったので、以下のようにしました。
fetch(`https://cors-suzuki-app.herokuapp.com/http://webservice.recruit.co.jp/（省略）`)
これで準備完了です。
CORSエラーを回避し、データが取得できているか確認してください。
スポンサードサーチ
まとめ
いかがだったでしょうか。
ローカルで確認するだけなら拡張機能の追加で対応できますが、公開したい場合はプロキシサーバーで中継する必要があります。
また、今回初めて「CORS」という言葉を知りました。
セキュリティに関する知識も高めていきたいと思いました。
参考
cors-anywhere を Heroku へ deploy する方法
webエンジニア転職を目指している方はこちら