メニュー
Amazon API Gateway
開発者ガイド

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

API リソースが API 独自のドメイン以外のドメインからリクエストを受け取る場合、リソースの選択されたメソッドで Cross-Origin Resource Sharing (CORS) を有効にする必要があります。これは、少なくとも次の CORS が必要なレスポンスヘッダーで、OPTIONS プリフライトリクエストに対して API を応答させることを意味します。

  • Access-Control-Allow-Methods

  • Access-Control-Allow-Headers

  • Access-Control-Allow-Origin

API Gateway では、Mock 統合タイプで OPTIONS メソッドを設定して CORS を有効にし、前述のレスポンスヘッダーを (次に説明する静的な値とともに) メソッドのレスポンスヘッダーとして返します。さらに、実際の CORS が有効なメソッドも、少なくともその 200 レスポンスで Access-Control-Allow-Origin:'request-originating server addresses' ヘッダーを返す必要があります。特定の request-originating server addresses の静的な値を * に置き換えることで、任意のサーバーを指定できます。ただし、そのような広範なサポートを有効にすることは、慎重を期して、結果をよく把握している場合に限り行います。

Lambda 統合、AWS 統合、または HTTP 統合では、メソッドレスポンスと統合レスポンスを使用して必要なヘッダーを API Gateway で設定できます。Lambda または HTTP の プロキシ統合の場合も、必要な OPTIONS レスポンスヘッダーを API Gateway で設定できます。ただし、プロキシ統合では統合レスポンスが使えないので、Access-Control-Allow-Origin ヘッダーを返すにはバックエンドに依存する必要があります。

ヒント

OPTIONS メソッドは、CORS をサポートするプリフライトリクエストを処理するよう設定する必要があります。ただし、1) API リソースが GET、HEAD、または POST メソッドのみを公開し、2) リクエストのペイロードコンテンツタイプが application/x-www-form-urlencodedmultipart/form-data、または text/plain であり、3) リクエストにカスタムヘッダーが含まれていない場合、OPTIONS メソッドはオプションです。可能であれば、OPTIONS メソッドを使用して API で CORS を有効にすることをお勧めします。

このセクションでは、API Gateway コンソールまたは API Gateway (API をインポートする) を使用して、API Gateway のメソッドで CORS を有効にする方法について説明します。

前提条件

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

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

  2. API Gateway コンソールで、[APIs] の API を選択します。

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

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

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

    [Enable CORS] を選択する
  5. [Enable 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. [Enable CORS and replace existing CORS headers] を選択します。

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

    注記

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

  6. [Confirm method changes] で、[Yes, overwrite existing values] を選択して新しい CORS 設定を確認します。

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

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

API のいずれの更新でも同じですが、新しい設定を有効にするには API をデプロイまたは再デプロイする必要があります。

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

API Gateway の API のインポートを使用している場合、Swagger ファイルを使用して CORS サポートをセットアップできます。最初に、必要なヘッダーを返すリソースの、OPTIONS メソッドを定義する必要があります。

注記

ウェブブラウザは、Access-Control-Allow-Headers ヘッダーおよび Access-Control-Allow-Origin ヘッダーが、CORS リクエストを受け入れる各 API メソッドでセットアップされると想定します。また、一部のブラウザは、同じリソースの OPTIONS メソッドに対して HTTP リクエストを行ってから、同じヘッダーを受け取ることを想定します。

次の例では、OPTIONS メソッドを作成して、Mock 統合を指定します。 詳細については、「メソッドのモック統合を設定する」を参照してください。

Copy
/users options: summary: CORS support description: | Enable CORS by returning correct headers consumes: - application/json produces: - application/json tags: - CORS x-amazon-apigateway-integration: type: mock requestTemplates: application/json: | { "statusCode" : 200 } responses: "default": statusCode: "200" responseParameters: method.response.header.Access-Control-Allow-Headers : "'Content-Type,X-Amz-Date,Authorization,X-Api-Key'" method.response.header.Access-Control-Allow-Methods : "'*'" method.response.header.Access-Control-Allow-Origin : "'*'" responseTemplates: application/json: | {} responses: 200: description: Default response for CORS method headers: Access-Control-Allow-Headers: type: "string" Access-Control-Allow-Methods: type: "string" Access-Control-Allow-Origin: type: "string"

リソースに OPTIONS メソッドを設定したら、CORS リクエストを受け入れる必要がある同じリソースのその他のメソッドに、必要なヘッダーを追加できます。

  1. Access-Control-Allow-OriginAccess-Control-Allow-Origin を応答のタイプに対して宣言します。

    Copy
    responses: 200: description: Default response for CORS method headers: Access-Control-Allow-Headers: type: "string" Access-Control-Allow-Methods: type: "string" Access-Control-Allow-Origin: type: "string"
  2. x-amazon-apigateway-integration タグで、これらのヘッダーのマッピングを静的な値にセットアップします。

    Copy
    responses: "default": statusCode: "200" responseParameters: method.response.header.Access-Control-Allow-Headers : "'Content-Type,X-Amz-Date,Authorization,X-Api-Key'" method.response.header.Access-Control-Allow-Methods : "'*'" method.response.header.Access-Control-Allow-Origin : "'*'"