API Gateway による CORS エラーをトラブルシューティングする方法を教えてください?

簡単な説明

クロスオリジンリソース共有 (CORS) エラーは、CORS 標準で必要とされる HTTP ヘッダーがサーバーから返らないときに発生します。API Gateway REST API または HTTP API による CORS エラーを解決するには、CORS 標準を満たすように API を再設定する必要があります。

**注:**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 の場合

Configuring CORS for an HTTP API の手順に従います。

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

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

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

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

応答で必要な 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 (Route53 エイリアス) を使用してください。

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

**注:****rest-api-id **、region、vpce-id、および stage を自分の API 値に置き換えてください。詳細については、プライベート API を呼び出す方法を参照してください。

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

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

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

関連情報

CORS のテスト

API Gateway のインポート API で、リソースの CORS を有効にする