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

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

注記

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

次の例では、モック統合の OPTIONS メソッドを作成します。

OpenAPI 3.0

/users:
  options:
    summary: CORS support
    description: |
      Enable CORS by returning correct headers
    tags:
    - CORS
    responses:
      200:
        description: Default response for CORS method
        headers:
          Access-Control-Allow-Origin:
            schema:
              type: string
          Access-Control-Allow-Methods:
            schema:
              type: string
          Access-Control-Allow-Headers:
            schema:
              type: string
        content: {}
    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: |
              {}

OpenAPI 2.0

/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-Origin と Access-Control-Allow-Origin を応答のタイプに対して宣言します。

   OpenAPI 3.0

       responses:
         200:
           description: Default response for CORS method
           headers:
             Access-Control-Allow-Origin:
               schema:
                 type: string
             Access-Control-Allow-Methods:
               schema:
                 type: string
             Access-Control-Allow-Headers:
               schema:
                 type: string
           content: {}

   OpenAPI 2.0

         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 タグで、これらのヘッダーのマッピングを静的な値にセットアップします。

   OpenAPI 3.0

       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: |
                 {}

   OpenAPI 2.0

           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 : "'*'"