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

Cross-origin resource sharing (CORS) は、ブラウザで実行されているスクリプトから開始されるクロスオリジン HTTP リクエストを制限するブラウザのセキュリティ機能です。詳細については、「CORS とは」を参照してください。

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

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

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

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

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

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

API にアクセスできず、Cross-Origin Request Blocked を含むエラーメッセージが表示される場合は、CORS を有効にする必要がある場合があります。

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

シンプルなリクエストの CORS を有効にする

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

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

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

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

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

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

シンプルなクロスオリジンの POST メソッドリクエストの場合、リソースからのレスポンスにはヘッダー Access-Control-Allow-Origin: '*' または Access-Control-Allow-Origin:'origin' を含める必要があります。

他のすべてのクロスオリジン HTTP リクエストはシンプルではないリクエストです。

シンプルではないリクエストの CORS を有効にする

API のリソースがシンプルではないリクエストを受け取った場合は、統合タイプに応じて追加の CORS サポートを有効にする必要があります。

非プロキシ統合の CORS を有効にする

これらの統合の場合、CORS プロトコルは、実際のリクエストを送信する前に、ブラウザからサーバーにプリフライトリクエストを送信し、サーバーからの承認 (または認証情報のリクエスト) を待つことを要求します。プリフライトリクエストに適切なレスポンスを送信するように API を設定する必要があります。

プリフライトレスポンスを作成するには

1. モック統合の OPTIONS メソッドを作成します。

2. 以下のレスポンスヘッダーを 200 メソッドレスポンスに追加します。

   • Access-Control-Allow-Headers

   • Access-Control-Allow-Methods

   • Access-Control-Allow-Origin

3. 統合パススルーの動作を NEVER に設定します。この場合、マッピングされていないコンテンツタイプのメソッドリクエストは、HTTP 415 Unsupported Media Type レスポンスで拒否されます。詳細については、「統合パススルーの動作」を参照してください。

4. レスポンスヘッダーの値を入力します。すべてのオリジン、すべてのメソッド、および共通のヘッダーを許可するには、以下のヘッダー値を使用します。

   • Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'

   • Access-Control-Allow-Methods: '*'

   • Access-Control-Allow-Origin: '*'

プリフライトリクエストを作成したら、少なくとも 200 個すべてのレスポンスに対して、すべての CORS 対応メソッドの Access-Control-Allow-Origin: '*' ヘッダーまたは Access-Control-Allow-Origin:'origin' ヘッダーを返す必要があります。

AWS Management Consoleを使用して非プロキシ統合の CORS を有効にする

AWS Management Consoleを使用して CORS を有効にすることができます。API Gateway は、OPTIONS メソッドを作成し、Access-Control-Allow-Origin ヘッダーを既存のメソッド統合レスポンスに追加します。これは常に機能するとは限りません。場合によっては、少なくとも 200 個すべてのレスポンスに対して、すべての CORS 対応メソッドの Access-Control-Allow-Origin ヘッダーを返すように統合レスポンスを手動で変更する必要があります。

プロキシ統合の CORS サポートを有効にする

Lambda プロキシ統合または HTTP プロキシ統合の場合、プロキシ統合は統合レスポンスを返さないため、バックエンドが Access-Control-Allow-Origin ヘッダー、Access-Control-Allow-Methods ヘッダー、Access-Control-Allow-Headers ヘッダーを返す必要があります。

以下の Lambda 関数の例は、必要な CORS ヘッダーを返します。

Node.js

export const handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "https://www.example.com",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

Python 3

import json

def lambda_handler(event, context):
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Allow-Origin': 'https://www.example.com',
            'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
        },
        'body': json.dumps('Hello from Lambda!')
    }

トピック

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