サブドメイン API にアクセスすると、React アプリで CORS エラーが発生するのはなぜですか: 「メイン ドメインからサブドメインへのアクセスに失敗しました: いいえ、「Access-Control-Allow-Origin」\」

CORS エラーについて: 'メイン ドメインからサブドメインへのアクセスに失敗しました: いいえ 'Access-Control-Allow-Origin'

クロスオリジン リソース共有 (CORS)は、異なるドメインが相互に対話できるようにするメカニズムです。 API サーバーがサブドメインで実行され、React アプリがメイン ドメインで動作すると、「メイン ドメインからサブドメインへのアクセスに失敗しました: 'Access-Control-Allow-Origin' がありません」エラーなどの CORS エラーが発生する可能性があります。

問題の調査

Chrome DevTools でプリフライト リクエストを検査し、キャッシュされた応答とプリフライト リクエストを確認します。応答ヘッダーを出力する -i オプションを忘れずに追加して、curl などのツールを使用してプリフライト リクエストを実行します。

ケース分析

• ケース 1: これこのアプローチでは、ワイルドカード起点を有効にするデフォルトの CORS 構成を利用します。ただし、テストの結果、正しく機能することがわかりました。
• ケース 2: 許可されたオリジン、メソッド、ヘッダーのカスタマイズも成功したことがわかります。
• ケース 3: CORS ヘッダーを手動で処理することも、別の実行可能な解決策です。

問題の解決

AWS ロード バランサー ターゲット グループの設定ミス (OP のソリューションに基づく)

この特定の問題の根本原因は、AWS ロード バランサー ターゲット グループの構成ミスでした。適切な SSL 証明書が提供されていないにもかかわらず、ターゲット グループのプロトコルは HTTPS に設定されました。プロトコルを修正すると問題が解決しました。

デバッグのヒント

• Chrome DevTools でキャッシュを無効にして、プリフライト レスポンスのキャッシュを回避します。
• プリフライト リクエストをサービスに直接送信して、プロキシ干渉の可能性があります。
• デバッグ目的でリクエスト バッファを出力します (例: httputil.DumpRequest を使用)。

以上がサブドメイン API にアクセスすると、React アプリで CORS エラーが発生するのはなぜですか: 「メイン ドメインからサブドメインへのアクセスに失敗しました: いいえ、「Access-Control-Allow-Origin」\」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。