CORS 構成が適切であるにもかかわらず、サブドメイン上の API サーバーが「Access-Control-Allow-Origin」ヘッダーで応答しないのはなぜですか?

メイン ドメインからサブドメインへのアクセスに失敗しました: 'Access-Control-Allow-Origin' ヘッダーがありません

問題は、次の操作を試みたときに発生します。メインドメインの React アプリからサブドメインでホストされている API サーバーにアクセスします。クロスオリジン通信に CORS (Cross-Origin Resource Sharing) を使用している場合、サーバーは「Access-Control-Allow-Origin」ヘッダーを送信して、アクセスを許可するドメインを指定する必要があります。

問題の定義

React アプリから API にアクセスしようとすると、CORS ポリシー エラーが発生しました。「要求されたリソースには 'Access-Control-Allow-Origin' ヘッダーが存在しません」というエラー メッセージが表示されます。」 gin-contrib/cors ライブラリの使用やヘッダーの手動追加など、さまざまな方法を使用して CORS ミドルウェアを設定したにもかかわらず、エラーが継続します。

解決策

問題はサーバー側の CORS 設定ではなく、AWS ロード バランサー ターゲット グループの設定にあることがわかります。 ACM 証明書を Route 53 と ALB にのみ提供していましたが、以前はターゲット グループでプロトコルを HTTPS に設定していました。ターゲット グループで HTTPS を HTTP に置き換えると、問題は解決され、React アプリから API にアクセスできるようになりました。

CORS の問題のデバッグ

CORS を診断するには-関連する問題を解決するには、Chrome DevTools または cURL などの専用ツールを使用してプリフライト リクエストを調べることが重要です。プリフライト応答ヘッダーをチェックして、予期される「Access-Control-Allow-Origin」ヘッダーが存在することを確認します。応答が 204 No Content 以外のステータス コードを示している場合、サーバー側の応答またはクライアントによるその解釈に問題があることを示している可能性があります。

以上がCORS 構成が適切であるにもかかわらず、サブドメイン上の API サーバーが「Access-Control-Allow-Origin」ヘッダーで応答しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。