ReactJS で SSO サーバーからの 302 リダイレクトを処理し、CORS エラーを回避する方法

ReactJS GET リクエストが 302 でリダイレクトされ、CORS エラーが発生しました

ReactJS 開発環境では、シングル サインオン (SSO) を介してユーザーを認証すると、バックエンドが 302 リダイレクトで応答するときに問題が発生します。シナリオを検討して、CORS エラーを克服する解決策を見つけてみましょう。

シナリオ:

• フロントエンド サーバー: f.com で実行されている ReactJS アプリケーション
• バックエンド サーバー: b.com で実行されている Golang API
• SSO サーバー: sso.example.com

問題:

ReactJS は GET リクエストを b.com/users に送信します。バックエンドは、sso.example.com/login の SSO ページへの HTTP 302 リダイレクトで応答します。ただし、ReactJS アプリでは sso.example.com からの CORS エラーが発生し、リダイレクトがブロックされます。

解決策:

SSO サーバーは応答ヘッダーを変更できないため、クライアント側で JavaScript でリダイレクトを処理するのが最善です。このアプローチにより、CORS の問題が回避されます。

オプション 1: React Router

React Router を使用してプログラムでナビゲートし、クライアント側でリダイレクトを処理できます。ただし、この方法はより複雑です。

オプション 2: Window.location.href

より単純かつ直接的なアプローチとして、window.location.href を使用できます。ユーザーを SSO ページにリダイレクトするプロパティ:

<code class="javascript">window.location.href = "https://www.example.com";</code>

注: このメソッドは閲覧履歴に影響を与える可能性があります。

以上がReactJS で SSO サーバーからの 302 リダイレクトを処理し、CORS エラーを回避する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。