Enable CORS for API Gateway in Cloudformation template

Question

I'm creating AWS Cloudformation template for my environment and I can't find a way to enable CORS for API Gateway method.

I can configure it using AWS console (here is the official doc), but how can I do it in the Cloudformation template?

Answer 1

After some trial and error, I found that the following CloudFormation template snippet will produce an equivalent OPTIONS method when compared to the CORS console wizard:

OptionsMethod:
  Type: AWS::ApiGateway::Method
  Properties:
    AuthorizationType: NONE
    RestApiId:
      Ref: MyApi
    ResourceId:
      Ref: MyResourceOnWhichToEnableCORS
    HttpMethod: OPTIONS
    Integration:
      IntegrationResponses:
      - StatusCode: 200
        ResponseParameters:
          method.response.header.Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
          method.response.header.Access-Control-Allow-Methods: "'POST,OPTIONS'"
          method.response.header.Access-Control-Allow-Origin: "'*'"
        ResponseTemplates:
          application/json: ''
      PassthroughBehavior: WHEN_NO_MATCH
      RequestTemplates:
        application/json: '{"statusCode": 200}'
      Type: MOCK
    MethodResponses:
    - StatusCode: 200
      ResponseModels:
        application/json: 'Empty'
      ResponseParameters:
          method.response.header.Access-Control-Allow-Headers: false
          method.response.header.Access-Control-Allow-Methods: false
          method.response.header.Access-Control-Allow-Origin: false

*Note 1: This is an example of taking the defaults for a POST. Obviously, you'll need to update Access-Control-Allow-Methods to include the values you need.

*Note 2: Kudos to the AWS CloudFormation team for recently introducing YAML support. If you need to convert to/from YAML/JSON, I have found this site handy: http://www.json2yaml.com/

Answer 2

The API Gateway support for automatic CORS configuration currently only works via the API Gateway console. You can still set-up CORS yourself when importing an API from swagger or when defining an API via CloudFormation, but you must specify all the parameters for setting up the OPTIONS method as well as adding the CORS specific headers to your other methods.

This page shows how to set-up CORS when importing swagger. Setting up CORS via CloudFormation is conceptually similar, but uses the CloudFormation syntax rather than the swagger syntax.

Answer 3

Try this:

  OPTIONS: 
   Type: AWS::ApiGateway::Method 
   Properties: ApiKeyRequired: false
   RestApiId: !Ref YourAPI 
   ResourceId: !Ref YourResourceName 
   HttpMethod: OPTIONS 
   AuthorizationType: NONE 
   Integration: 
    Type: MOCK 
    IntegrationResponses: 
     - StatusCode: 200 
     ResponseParameters: 
      method.response.header.Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'" 
      method.response.header.Access-Control-Allow-Methods: "'GET,OPTIONS'" 
      method.response.header.Access-Control-Allow-Origin: "'*'" 
     ResponseTemplates: 
      application/json: '' 
    PassthroughBehavior: WHEN_NO_MATCH 
    RequestTemplates: 
     application/json: '{"statusCode": 200}' 
    Type: MOCK 
   MethodResponses: 
   - StatusCode: 200 
   ResponseModels: 
    application/json: 'Empty' 
   ResponseParameters: 
    method.response.header.Access-Control-Allow-Headers: false 
    method.response.header.Access-Control-Allow-Methods: false 
    method.response.header.Access-Control-Allow-Origin: false

Answer 4

it only create option method, there are still work need to do on GET,POST,etc method reponse, I have created a completed hello world cloudformation

https://github.com/seraphjiang/aws-cors-cloudformation/tree/master

Answer 5

This snippet has worked for my team's deployments. Note that this is a proxy resource with an ANY method.

CORSOptionsMethod: # Adds cors
    Type: "AWS::ApiGateway::Method"
    Properties:
      ResourceId:
        !Ref apiProxy
      RestApiId:
        !Ref api
      AuthorizationType: NONE
      HttpMethod: OPTIONS
      Integration:
        Type: MOCK
        IntegrationResponses:
          - ResponseParameters:
              method.response.header.Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,Cache-Control'"
              method.response.header.Access-Control-Allow-Methods: "'GET,POST,PUT,DELETE,OPTIONS'"
              method.response.header.Access-Control-Allow-Origin: !Sub
                - "'${CORSOrigin}'"
                - { 'CORSOrigin': !FindInMap [Environment, !Ref Environment, CORSOrigin] }
            ResponseTemplates:
              application/json: ''
            StatusCode: '200'
        PassthroughBehavior: NEVER
        RequestTemplates:
          application/json: '{"statusCode": 200}'
      MethodResponses:
        - ResponseModels:
            application/json: Empty
          ResponseParameters:
            method.response.header.Access-Control-Allow-Headers: true
            method.response.header.Access-Control-Allow-Methods: true
            method.response.header.Access-Control-Allow-Origin: true
          StatusCode: '200'

Answer 6

If you're using AWS SAM like I was, you can configure your API resource with the Cors property:

Resources:
  MyApi:
    Type: AWS::Serverless::Api
    Properties:
      Cors:
        AllowHeaders: "'*'"
        AllowMethods: "'*'"
        AllowOrigin: "'*'"

This blog post helped me get it configured with Lambda as a proxy integration: https://dan.salvagni.io/b/aws-sam-rest-api-from-swagger-file/