Suzuki Blog Written by Yuki Suzuki

CORSエラーの回避方法【cors-anywhereを利用してプロキシサーバーを立てる】

JavaScript

先日こちらのアプリを作成しました。

Minimum Options

飲食店の検索アプリで、お店の情報は「ホットペッパーAPI」から取得しています。

ホットペッパー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アプリに対して、異なるオリジンのサーバーへのアクセスを許可できる仕組みのことです。

オリジン間リソース共有 (CORS)

今回の場合は、「ホットペッパーAPI」へのアクセスを許可されていないため、CORSエラーが表示されたと理解しています。

この記事ではCORSエラーの回避方法をまとめていきます。

記事の内容

  • Chromeの拡張機能を使用
  • cors-anywhereを使用してプロキシサーバーを立てる

スポンサードサーチ

Chromeの拡張機能を使用

最初の回避方法はChromeの拡張機能を使用する方法です。

「CORS Unblock」を追加することで回避できます。

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にデプロイします。

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 する方法

CORS未対応APIに、PROXYを中継して通信を行う

オリジン間リソース共有 (CORS)

Herokuスターターガイド

コーディングを学ぶならデイトラ

Web制作コース

動画でプログラミングを学ぶなら

Udemy

オンラインスクールでプログラミングを学ぶなら

Skill Hacks