API Gateway API からの CORS エラーをトラブルシューティングするにはどうすればよいですか?

簡単な説明

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

REST API 用の CORS の設定の詳細については、REST API リソース用の CORS を有効にするを参照してください。HTTP API については、「HTTP API の CORS の設定」をご参照ください。

注: CORS はリソースレベルで構成する必要があり、API Gateway 構成または AWS Lambda などのバックエンド統合を使用して処理できます。

解決方法

以下の例は、「Access-Control-Allow-Origin」ヘッダーが存在しません という CORS エラーをトラブルシューティングする方法を示しています。なお、同様の手順を使用して、すべての CORS エラーをトラブルシューティングできます。例: 「メソッドは Access-Control-Allow-Methods ヘッダーでサポートされていません」というエラー、および「「Access-Control-Allow-Headers」ヘッダーが存在しません」というエラー。

注: 「「Access-Control-Allow-Headers」ヘッダーが存在しません」というエラーは、次のいずれかの理由で発生する可能性があります。

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

エラーの原因を確認する

API Gateway からの CORS エラーの原因を確認するには、次の 2 つの方法があります。

• API を呼び出すときに HTTP アーカイブ (HAR) ファイルを作成します。その後、API 応答で返されたパラメータのヘッダーをチェックして、ファイル内のエラーの原因を確認します。

• または -

• ブラウザのデベロッパーツールを使用して、失敗した API リクエストのリクエストと応答パラメータをチェックします。

エラーが発生している API リソースで CORS を構成します

REST API の場合

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

HTTP API の場合

HTTP API の CORS の設定の手順に従います。

**重要：**HTTP API の CORS を設定すると、API Gateway はプリフライト OPTIONS リクエストへの応答を自動的に送信します。この応答は、API に OPTIONS ルートが構成されていない場合でも送信されます。CORS リクエストの場合、API Gateway は設定された CORS ヘッダーを統合からのレスポンスに追加します。

API リソースで CORS を設定するときは、次のことを確認してください。

• Gateway Responses for <api-name> API (<api-name> API の Gateway 応答) で、DEFAULT 4XX および DEFAULT 5XX チェックボックスをオンにします。

注: これらのデフォルトオプションを選択すると、リクエストがエンドポイントに到達しない場合でも、API Gateway は必要な CORS ヘッダーで応答します。例えば、リクエストに誤ったリソースパスが含まれている場合でも、API Gateway は 403「Missing Authentication Token (認証トークンが見つかりません)」 エラーで応答します。

• メソッド で OPTIONS メソッドのチェックボックスがまだ選択されていない場合は、それを選択します。また、CORS リクエストで利用できる他のすべてのメソッドのチェックボックスを選択します。例: GET、PUT、POST。

注: API Gateway コンソールで CORS を構成すると、OPTIONS メソッドがまだ存在しない場合は、リソースに追加されます。また、必要な Access-Control-Allow-* ヘッダーを使用して 、OPTIONS メソッドの 200 応答を設定します。コンソールを使用してすでに CORS を設定している場合は、コンソールを再度設定すると、既存の値が上書きされます。

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

応答で必要な CORS ヘッダーを送信するように、バックエンド AWS Lambda 関数または HTTP サーバーを設定します。以下の点にご注意ください。

• 許可されたドメインは、Access-Control-Allow-Origin ヘッダー値にリストとして含まれている必要があります。
• プロキシ統合 の場合、API Gateway で統合応答を設定して、API のバックエンドから返される応答パラメータを変更することはできません。プロキシ統合では、API Gateway はバックエンド応答をクライアントに直接転送します。
• 非プロキシ統合を使用する場合は、API Gateway で統合応答 を手動で設定して、必要な CORS ヘッダーを返す必要があります。

注: 非プロキシ統合の API の場合、API Gateway コンソールを使用してリソースに CORS を設定すると、必要な CORS ヘッダーがリソースに自動的に追加されます。

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

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

プライベート DNS がアクティブ化されている場合

プライベート DNS 名を使用して、Amazon Virtual Private Cloud (Amazon VPC) 内からプライベート API を呼び出すようにしてください。

プライベート DNS がアクティブ化されていない場合

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

**注:**プライベート DNS がアクティブ化されているかどうかに関係なく、次の呼び出し URL を使用する必要があります。

https://api-id.execute-api.region.amazonaws.com/stage-name

api-id、リージョン、stage-name の値を、API に必要な値に置き換えてください。詳細については、「プライベート API を呼び出す方法」を参照してください。

重要: プライベート DNS がアクティブ化されていないときに CORS が設定されている場合は、次の制限に注意してください。

• エンドポイント固有のパブリック DNS 名を使用して、Amazon VPC 内からプライベート API にアクセスすることはできません。
• ブラウザからのリクエストは Host ヘッダーの操作を許可しないため、Host ヘッダーオプションを使用することはできません。
• x-apigw-api-id カスタムヘッダーは、ヘッダーを含まないプリフライト OPTIONS リクエストを開始するため、使用できません。x-apigw-api-id ヘッダーを使用する API コールは、API に到達しません。

---

関連情報

CORS のテスト

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