API Gatewayが CORS エラーを返す場合のトラブルシューティング方法を教えてください。

簡単な説明

CORS 規格で必要な HTTP ヘッダーがサーバーから返されない場合、CORS エラーが発生します。API Gateway REST API または HTTP API での CORS エラーを解決するには、API を再設定し、CORS 規格を満たす必要があります。

**注:**CORS はリソースレベルで設定する必要があり、API Gateway 設定または AWS Lambda などのバックエンド統合を使用してください。

解決策

「Access-Control-Allow-Origin」ヘッダーが存在しませんという CORS エラーだけでなく、次の手順を使用してすべての CORS エラーをトラブルシューティングできます。その他の CORS エラーには、メソッドは Access-Control-Allow-Methods ヘッダーでサポートされていませんというエラー、および 「Access-Control-Allow-Headers」ヘッダーが存在しませんというエラーがあります。

「Access-Control-Allow-Origin」ヘッダーが存在しません というエラーは、発生理由は次のいずれかが考えられます。

• API が、必要な CORS ヘッダーを返す OPTIONS メソッドで設定されていない。
• 別のメソッド型 (GET、PUT、POST など) が必要な CORS ヘッダーを返すように設定されていない。
• API の構成が、プロキシ統合または非プロキシ統合を使用して必要な CORS ヘッダーを返すように設定されていない。
• プライベート REST API で誤った呼び出し URL が呼び出される。または、トラフィックがインターフェイス仮想プライベートクラウド (VPC) エンドポイントにルーティングされていない。

エラーの原因を確認する

次のいずれかの操作を行います。

• API を呼び出す際、HTTP アーカイブ (HAR) ファイルを作成します。次に、API 応答で返されるパラメータのヘッダーを参照し、ファイルエラーの原因を確認します。
• ブラウザのデベロッパーツールを使用して、失敗した API リクエストに関するリクエストと応答パラメータを確認します。

エラーが発生した API リソースで CORS を設定する

REST API

「API Gateway コンソールを使用してリソースで CORS を有効にする」の手順を実行します。

HTTP API

「API Gateway で HTTP API 用の CORS を設定する」の手順を実行します。

API リソースで CORS を設定する場合は、次のオプションを選択します。

[ゲートウェイの応答] で DEFAULT 4XX と DEFAULT 5XX を選択します。DEFAULT 4XX と DEFAULT 5XX を選択すると、リクエストがエンドポイントに到達しなかった場合も、API Gateway は必要な CORS ヘッダーで応答します。たとえば、リクエストに誤ったリソースパスが含まれている場合も、API Gateway は 403 「Missing Authentication Token」エラーで応答します。

Access-Control-Allow-Methods で OPTIONS が選択されていない場合は、選択します。さらに、GET、PUT、POST など、CORS リクエストで使用できる他のすべてのメソッドを選択します。API Gateway コンソールは、必要な Access-Control-Allow ヘッダーを使用して OPTIONS メソッドの 200 件の応答を設定し、再構成されたリソース内の既存の値を上書きします。

REST API 統合で必要な CORS ヘッダーを返すように設定する

応答で必要な CORS ヘッダーを返すには、バックエンドの AWS Lambda 関数または HTTP プロキシサーバーを設定します。Access-Control-Allow-Origin ヘッダー値には、許可するドメインをリストとして含める必要があります。

プロキシ統合では、API Gateway で統合の応答を設定し、API のバックエンドが返す応答パラメータを変更することはできません。プロキシ統合では、API Gateway からバックエンド応答はクライアントに直接転送されます。

非プロキシ統合を使用する場合は、API Gateway で統合応答を手動で設定し、必要な CORS ヘッダーを返す必要があります。API Gateway コンソールを使用して CORS を設定します。コンソールは、必要な CORS ヘッダーを設定したリソースに自動的に追加します。

(プライベート REST API のみ) インターフェイスエンドポイントのプライベート DNS 設定を確認する

プライベート REST API では、関連付けられたインターフェイス VPC エンドポイントでプライベート DNS がアクティブになっているかどうかを確認します。

プライベート DNS がアクティブな場合

プライベート DNS 名を使用して、Amazon Virtual Private Cloud (Amazon VPC) 内からプライベート API を呼び出します。

プライベート DNS がアクティブになっていない場合

呼び出し URL から VPC エンドポイントの IP アドレスまでのトラフィックを手動でルーティングする必要があります。次の呼び出し URL (Amazon Route 53 のエイリアス) を使用します。

https://{rest-api-id}-{vpce-id}.execute-api.{region}.amazonaws.com/{stage}

注: rest-api-id、region、vpce-id、stage は、実際の API の値に置き換えます。

プライベート DNS がアクティブになっていない場合、エンドポイント固有のパブリック DNS 名を使用して VPC 内からプライベート API にアクセスすることはできません。また、ブラウザからのリクエストでは Host ヘッダーを変更できないため、Host ヘッダーオプションは使用できません。

プライベート API では、ヘッダーを含まないプリフライト OPTIONS リクエストを開始するため、x-apigw-api-id カスタムヘッダーを使用できません。x-apigw-api-id ヘッダーを使用する API コールは API に到達しません。

注: API の OPTIONS メソッドで認証がオフになっていることを確認してください。

関連情報

API Gateway API の CORS をテストする

API Gateway インポート API を使用してリソースで CORS を有効にする