ReactJS での GET リクエストのリダイレクトと CORS エラーの処理

ReactJS アプリケーションが GET リクエストをサーバーに送信して受信したときに CORS エラーが発生しました302 リダイレクトはイライラする問題になる可能性があります。この問題の解決策は次のとおりです。

ReactJS フロントエンド (f.com) がパス '/users' でバックエンド サーバー (b.com) をリクエストするシナリオの CORS エラーを解決するには、バックエンドが SSO ログイン ページ (sso.example.com/login) にリダイレクトする場合は、次のアプローチを使用できます:

クライアント側リダイレクト:

です。ブラウザ内のクライアント側でリダイレクトを処理する方が簡単です。この方法では、リダイレクトが SSO Web サイトの URL に直接行われるため、CORS の問題が回避されます。

クライアント側のリダイレクトを実行するには:

オプション 1: React Router を使用する (複雑) )

• 反応ルーターを使用して React 内にリダイレクトを実装します。
• 次のドキュメントを参照してください: Programmatically navigate using React router V4

オプション 2: プレーン JavaScript を使用する (簡単)

• window.location.href プロパティを使用してブラウザを直接リダイレクトします。
• ブラウザに潜在的な問題があることを確認します。

• コード サンプル:

  window.location.href = "https://www.example.com";

• 詳細については、https://appendto.com/2016/04/javascript-redirect-how-to-redirect-a-web-page-with-javascript/

これらのいずれかを実装することで、リダイレクト戦略を使用すると、ReactJS アプリケーションでの CORS エラーを回避しながら、GET リクエストのリダイレクトを正常に処理できます。