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 リクエストはシンプルです。

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

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

• リクエストのペイロードコンテンツタイプが text/plain、multipart/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 メソッドレスポンスおよび統合レスポンス設定を使用して、必要なヘッダーを設定できます。AWS Management Console を使用して CORS を有効にすると、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 を返します。

以下の 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 のテスト