Amazon API Gateway
開発者ガイド

API Gateway REST API リソースの CORS を有効にする

Cross-origin resource sharing (CORS) は、ブラウザで実行されているスクリプトから開始されるクロスオリジン HTTP リクエストを制限するブラウザのセキュリティ機能です。REST API のリソースが非シンプルクロスオリジンの HTTP リクエストを受け取る場合、CORS サポートを有効にする必要があります。

CORS サポートを有効にするかどうかを決定する

クロスオリジン HTTP リクエストは、以下に対して行われます。

  • 別のドメイン (例: example.com から amazondomains.com へ)

  • 別のサブドメイン (例: example.com から petstore.example.com へ)

  • 別のポート (例: example.com から example.com:10777 へ)

  • 別のプロトコル (例: https://example.com から http://example.com へ)

クロスオリジン HTTP リクエストは、シンプルなリクエスト、およびシンプルではないリクエストの 2 種類に分類できます。

以下の条件がすべて当てはまる場合、HTTP リクエストはシンプルです。

  • GETHEAD、および POST のリクエストのみを許可する API リソースに対して発行されます。

  • それが POST メソッドリクエストの場合、Origin ヘッダーを含める必要があります。

  • リクエストのペイロードコンテンツタイプが text/plainmultipart/form-data、または application/x-www-form-urlencoded の場合。

  • リクエストにカスタムヘッダーが含まれていません。

  • シンプルなリクエストに関する Mozilla CORS のドキュメントに一覧表示されている追加要件。

シンプルなクロスオリジン POST メソッドリクエストの場合、リソースからのレスポンスには Access-Control-Allow-Origin ヘッダーを含める必要があります。ここで、ヘッダーキーの値は '*' (任意のオリジン) に設定されるか、そのリソースへのアクセスが許可されているオリジンに設定されます。

他のすべてのクロスオリジン HTTP リクエストはシンプルではないリクエストです。API のリソースがシンプルではないリクエストを受け取った場合は、CORS サポートを有効にする必要があります。

CORS サポートを有効にすることの意味

ブラウザがシンプルではない HTTP リクエストを受信した場合、CORS プロトコルはブラウザに実際のリクエストを送信する前に、サーバーへのリクエストをプリフライトし、サーバーからの承認 (または認証情報のリクエスト) を待ちます。プリフライトリクエストは、HTTP リクエストとして API に表示されます。

  • Origin ヘッダーが含まれています。

  • OPTIONS メソッドを使用します。

  • 以下のヘッダーが含まれます。

    • Access-Control-Request-Method

    • Access-Control-Request-Headers

したがって、CORS をサポートするために、REST API リソースは、フェッチ標準で必要な次のレスポンスヘッダーを使用して、少なくとも OPTIONS プリフライトリクエストに応答できる OPTIONS メソッドを実装する必要があります。

  • Access-Control-Allow-Methods

  • Access-Control-Allow-Headers

  • Access-Control-Allow-Origin

CORS サポートを有効にする方法は、API の統合タイプによって異なります。

モック統合の CORS サポートを有効にする

モック統合の場合は、必要なレスポンスヘッダー (適切な静的な値を含む) をメソッドのレスポンスヘッダーとして返す OPTIONS メソッドを作成して CORS を有効にします。さらに、実際の各 CORS 有効メソッドは、ヘッダーキーの値が '*' (任意のオリジン)、または、リソースへのアクセスを許可されたオリジンに設定された、200 レスポンスで、最低でも Access-Control-Allow-Origin:'request-originating server addresses' ヘッダーを返すことが必要です。

CORSにおける Lambda あるいは HTTP 非プロキシ統合、および AWS のサービス統合へのサポートを有効にする

Lambda カスタム (非プロキシ) 統合、HTTP カスタム (非プロキシ) 統合、または AWS サービス統合の場合、API Gateway メソッドレスポンスおよび統合レスポンス設定を使用して必要なヘッダーを設定できます。API Gateway は OPTIONS メソッドを作成し、既存のメソッド統合レスポンスに Access-Control-Allow-Origin ヘッダーを追加しようとします。これがうまく機能しないことがあります。CORS を適切に有効にするために統合レスポンスを手動で変更する必要がある場合もあります。通常、これは Access-Control-Allow-Origin ヘッダーを返すように手動で統合レスポンスを修正することを意味します。

Lambda または HTTP プロキシ統合への CORS のサポートを有効にする

Lambda プロキシ統合、または HTTP プロキシ統合の場合、API Gateway で必要な OPTIONS レスポンスヘッダーを引き続き設定できます。ただし、プロキシ統合は統合レスポンスを返さないため、バックエンドは Access-Control-Allow-Origin および Access-Control-Allow-Headers を返します。

以下は、必要な CORS ヘッダーを返すように構成された Node.js Lambda 関数の例です。

'use strict'; exports.handler = function(event, context) { var responseCode = 200; var response = { statusCode: responseCode, headers: { "x-custom-header" : "my custom header value", "Access-Control-Allow-Origin": "my-origin.com" }, body: JSON.stringify(event) }; context.succeed(response); };

より詳細な Node.js 例については、「https://github.com/awslabs/serverless-application-model/blob/master/examples/2016-10-31/api_swagger_cors/index.js Node.js」を参照してください。

以下は、必要な CORS ヘッダを返す Python コードスニペットの例です。

response["headers"] = { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }

以下は、AllowHeaders を含む、サーバーレスアプリケーションモデル (SAM) を使用して CORS に必要なヘッダーを返す例です。

Globals: Api: # Allows an application running locally on port 8080 to call this API Cors: AllowMethods: "'OPTIONS,POST,GET'" AllowHeaders: "'Content-Type'" AllowOrigin: "'http://localhost:8080'"

以下は、SAM の例と同じヘッダーを返す Lambda プロキシの例です。

return { 'statusCode': 200, 'headers': { "Access-Control-Allow-Origin": "http://localhost:8080", "Access-Control-Allow-Headers": "Content-Type", "Access-Control-Allow-Methods": "OPTIONS,POST,GET" }, 'body': json.dumps(response) }

CORS のテスト

実際のメソッドと使用しているオリジンヘッダー用に次の cURL コマンドをカスタマイズすることで CORS をテストできます。

curl -v -X OPTIONS -H "Access-Control-Request-Method: POST" -H "Origin: http://example.com" https://{restapi_id}.execute-api.{region}.amazonaws.com/{stage_name}

API Gateway コンソールを使用してリソースで CORS を有効にする

API Gateway コンソールを使用して、作成した REST API リソース上の 1 つまたはすべてのメソッドに対する CORS サポートを有効にできます。

重要

リソースには子リソースを含めることができます。リソースおよびそのメソッドに対する CORS サポートを有効にしても、子リソースおよびそのメソッドに対して再帰的に有効になるわけではありません。

REST API リソースで CORS サポートを有効にする

  1. https://console.aws.amazon.com/apigateway で API Gateway コンソールにサインインします。

  2. [API] リストから API を選択します。

  3. [リソース] のリソースを選択します。これにより、リソースのすべてのメソッドで CORS が有効になります。

    または、リソースでメソッドを選択し、このメソッドのみで CORS を有効にできます。

  4. [アクション] ドロップダウンメニューから [CORS の有効化] を選択します。

    
                        [CORS の有効化] を選択する
  5. [CORS の有効化] フォームで、以下の操作を行います。

    1. [Access-Control-Allow-Headers] 入力フィールドに、クライアントがリソースの実際のリクエストで送信する必要があるヘッダーのカンマ区切りリストの静的な文字列を入力します。コンソールで提供されたヘッダーのリスト 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token' を使用するか、独自のヘッダーを指定します。

    2. コンソールで提供された値 '*' を [Access-Control-Allow-Origin] ヘッダー値として使用してすべてのオリジンからのアクセスリクエストを許可するか、リソースへのアクセスを許可するオリジンを指定します。

    3. [CORS を有効にして既存の CORS ヘッダーを置換] を選択します。

    
                        どのヘッダーを許可するかを選択する

    重要

    上記の手順をプロキシ統合の ANY メソッドに適用すると、適切な CORS ヘッダーは設定されません。代わりに、バックエンドは Access-Control-Allow-Origin などの適切な CORS ヘッダーを返す必要があります。

  6. [メソッド変更の確認] で、[Yes, overwrite existing values (はい、既存の値を上書きします)] を選択して新しい CORS 設定を確認します。

    
                        既存の値の上書きを確認する

GET メソッドで CORS を有効にすると、すでに追加されていない場合は OPTIONS メソッドがリソースに追加されます。200 メソッドの OPTIONS レスポンスは、プリフライトハンドシェイクを満たすため 3 つの Access-Control-Allow-* ヘッダーを返すよう自動的に設定されます。さらに、実際の (GET) メソッドは、デフォルトでその 200 レスポンスで Access-Control-Allow-Origin ヘッダーを返すように設定されます。他の種類のレスポンスでは、Cross-origin access エラーが発生しないようにする場合、'*' または特定のオリジンを使って Access-Control-Allow-Origin' ヘッダーを返すよう手動で設定する必要があります。

リソースで CORS サポートを有効にした後、新しい設定を有効にするには API をデプロイまたは再デプロイする必要があります。詳細については、「API Gateway コンソールから REST API をデプロイする」を参照してください。