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

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

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

重要

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

Old REST API console
注記

API Gateway コンソールの設計を変更しました。古いコンソールエクスペリエンスは、2023 年 12 月から利用できなくなります。

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

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

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

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

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

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

    [Enable 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 をデプロイする」を参照してください。

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

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

  2. APIを選択します。

  3. [リソース] のリソースを選択します。

  4. [リソースの詳細] セクションで、[CORS の有効化] を選択します。

    [Enable CORS] を選択する

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

    1. (オプション) カスタムゲートウェイレスポンスを作成し、そのレスポンスの CORS サポートを有効にする場合は、ゲートウェイレスポンスを選択します。

    2. それぞれのメソッドを選択して CORS サポートを有効にします。OPTION メソッドでは CORS が有効になっている必要があります。

      ANY メソッドの CORS サポートを有効にすると、すべてのメソッドで CORS が有効になります。

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

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

    5. [Save (保存)] を選択します。

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

    上記の手順をプロキシ統合の ANY メソッドに適用すると、適切な CORS ヘッダーは設定されません。代わりに、バックエンドは Access-Control-Allow-Origin などの適切な 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 をデプロイする」を参照してください。