REST API リソースの CORS を有効にする - Amazon 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' ヘッダーを返すことが必要です。

Lambda 非プロキシ統合、HTTP 非プロキシ統合、AWS のサービス統合の CORS サポートを有効にする

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 の例は、GitHub を参照してください。

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

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

以下は、AllowHeaders を含む、AWS サーバーレスアプリケーションモデル (AWS 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'"

以下は、AWS 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) }