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 を使用)。デバッグ目的。