Reactのクロスオリジン問題の解決策は？
React はドメイン跨ぎソリューションを提供していません。なぜならドメイン跨ぎはブラウザに関連するセキュリティメカニズムだからです。ドメイン跨ぎの問題を解決する方法はサーバ側とブラウザ側の協調にあります。
サーバー側は特定のオリジンリソースアクセスを許可するため、レスポンスヘッダーのAccess-Control-Allow-Originフィールドを設定します。このフィールドは任意のオリジンアクセスを許可する「*」に設定することも可能ですが、特定のオリジンへのアクセスを許可することもできます。
React アプリケーションでは、ブラウザ側はプロキシサーバーを使用することでクロスドメイン問題に対処できます。package.json ファイルに “proxy” フィールドを追加し、プロキシサーバーのアドレスを指定できます。次に、開発環境で React アプリケーションが起動すると、すべてのネットワークリクエストがプロキシサーバーによって指定されたターゲットサーバーに転送され、クロスドメイン問題が回避されます。
また、ReactアプリケーションではJSONP、CORS(クロスオリジンリソースシェアリング)やWebSocketなどの技術を使用してクロスドメインリクエストを処理することもできます。
まとめると、ReactにおいてCORS問題への対処法は以下のとおりです。
- サーバー側でアクセス制御を許可するオリジンフィールドを設定する
- プロキシを使用する
- JSONPを使用する
- CORSを使用する
- Websocketの使用
