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

所要時間2分
0

Amazon API Gateway API を呼び出そうとすると、「リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません」というエラーが表示されます。API Gateway によるこのエラーやその他の 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-Origin」ヘッダーが存在しません** 」というエラーは、発生理由は次のいずれかが考えられます:

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

エラーの原因を確認する

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

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

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

REST API の場合

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

HTTP API の場合

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

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

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

  • API のゲートウェイ <api-name> 応答の場合、DEFAULT 4XXDEFAULT 5XX の各チェックボックスをオンにします。

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

  • [メソッド] では、OPTIONS メソッドのチェックボックスがオンになっていない場合は、それを選択します。また、CORS リクエストで利用できる他のすべてのメソッドのチェックボックスを選択します。例: GETPUTPOST

**注:**API Gateway コンソールで CORS を設定すると、OPTIONS メソッドがなければ、それがリソースに追加されます。また、OPTIONS メソッドの 200 件の応答が、必要な Access-Control-Allow-* ヘッダーとともに設定されます。コンソールを使用して 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 がアクティブな場合

Amazon Virtual Private Cloud (Amazon VPC) 内からプライベート DNS 名でプライベート API を呼び出していることを確認してください。

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

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

注: プライベート DNS がアクティブになっているかどうかにかかわらず、次の呼び出し URL を使用してください:

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

api-idregionstage-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 を有効にする

コメントはありません

関連するコンテンツ