React.js Axios利用時にCORSによるブロックを回避する方法

React.js Axios利用時にCORSによるブロックを回避する方法

Axiosを使用してGET時に、chromeにてエラー「CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension」が発生したので、とりあえずの回避方法を記載

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V12.13.1
  • npm 6.14.2
  • React 16.13.0

react.js環境構築

下記のコマンドで構築してます。ここでは、react-appという名前でプロジェクトを作成してます。

axiosインストール

作成したプロジェクトに移動して、インストールしてます。

axiosを利用してGETを行う

src配下にSample.jsを下記のコードでしてます。

次に、srcディレクトリ配下にあるApp.jsを下記のように編集してます。

実行します。

ブラウザから http://プライベートIP:3000にアクセスして、getボタンをクリックするとCORSによるブロックにより下記のエラーが発生します。

回避方法

ここでは「 http-proxy-middleware 」を利用して回避します。

src配下にsetupProxy.jsといな名前で、下記のコードでファイルを作成します。

次に、srcディレクトリ配下にあるApp.jsを下記のように編集します。

これで、再度ブラウザから http://プライベートIP:3000にアクセスし、getボタンをクリックするとAPIが取得できることが確認できます。

※proxyはbuild後には有効ではないので注意して下さい。