ReactJS の SSO ログイン ページへの 302 リダイレクトによる CORS エラーを処理する方法は?

302 リダイレクトを伴う ReactJS GET リクエストでの CORS エラー

ReactJS アプリがバックエンドに GET リクエストを送信するときに CORS エラーが発生しますサーバー (b.com) は、SSO ログイン ページ (sso.example.com) への 302 リダイレクトで応答します。 SSO ページの応答ヘッダーを制御できません。つまり、CORS 問題を解決するために Access-Control-Allow-Origin ヘッダーを追加できません。

解決策:

この CORS 制限を回避するには、ブラウザ内のクライアント側でリダイレクトを処理することをお勧めします。これにより、URL から SSO ページに直接アクセスしているため、CORS の問題が回避されます。

JavaScript 解決策:

プレーン JavaScript を使用して、次のように GET リクエストをリダイレクトできます。 window オブジェクト:

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

このアプローチは単純で実装が簡単ですが、ブラウザーの履歴に影響を与える可能性があります。あるいは、React のナビゲーション ライブラリを使用してリダイレクトをプログラムで処理することもできます。

<code class="javascript">import { useHistory } from "react-router-dom";

const history = useHistory();

useEffect(() => {
  history.push("https://www.example.com");
}, []);</code>

この方法により、リダイレクトをより正確に制御し、閲覧履歴に関する潜在的な問題を回避できます。クライアント側でリダイレクトを処理することにより、制御できない CORS ヘッダーを SSO ページに実装する必要がなくなります。

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