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

最終更新日: 2021 年 1 月 27 日

Amazon API Gateway API を呼び出そうとすると、「リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません」というエラーが表示されます。このエラーをトラブルシューティングする方法を教えてください。

簡単な説明

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

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

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

解決方法

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

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

  • API が、必要な CORS ヘッダーを返す OPTIONS メソッドで設定されていない。
  • 必要な CORS ヘッダーを返すように別のメソッド型 (GETPUTPOST など) が設定されていない。
  • プロキシ統合または非プロキシ統合を持つ 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 に OPTIONS ルートが設定されていなくても、API Gateway はプレフライトの OPTIONS リクエストに対する応答を自動的に送信します。CORS リクエストの場合、API Gateway は、設定された CORS ヘッダーを統合からの応答に追加します。

CORS を有効にする際に、以下の操作を行ってください。

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

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

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

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

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

応答で必要な CORS ヘッダーを送信するように、バックエンド AWS Lambda 関数または HTTP サーバーを設定します。Access-Control-Allow-Origin でドメインのリストを返すには、Access-Control-Allow-Origin ヘッダーの値としてリスト内のドメイン名を送信するようにバックエンドを設定する必要があります。

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

非プロキシ統合を使用する場合は、API Gateway で統合応答を手動で設定して、必要な CORS ヘッダーを返します。

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

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

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

インターフェイスエンドポイントでプライベート DNS が有効になっている場合は、プライベート DNS 名を使用して Amazon Virtual Private Cloud (Amazon VPC) 内からプライベート API を呼び出して、CORS エラーを回避します。

プライベート DNS が有効になっていない場合は、呼び出し URL から VPC エンドポイントの IP アドレスにトラフィックを手動でルーティングします。

注: プライベート DNS が有効かどうかに関係なく、次の呼び出し URL を使用します: https://api-id.execute-api.region.amazonaws.com/stage-name。 api-idregion、および stage-name は、API に必要な値に置き換えてください。 

詳細については、「プライベート API を呼び出す方法」をご参照ください。

重要: プライベート DNS が有効でないときに CORS が有効になっている場合は、以下の制限事項に留意してください。

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

この記事はお役に立ちましたか?


請求に関するサポートまたは技術サポートが必要ですか?