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?

Solution 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/

Solution 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.

Solution 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

Solution 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

View more solutions

Comments

[Dave Moten]

shouldn't the booleans at the end all be true instead of false?

[Leandros]

@DaveMoten Unlikely. From the docs: "The Boolean specifies whether a parameter is required." docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/…

[Viet]

hi @dannymac, can you help me with this CORS error? stackoverflow.com/questions/56688796/…

[Ani]

I have a similar issue, I tried this but didn't work for me - stackoverflow.com/questions/57655298/…

[Rony Tesler]

What is 'Ref: MyApi'? Please show the other relevant resources - MyApi and MyResourceOnWhichToEnableCORS

[Rony Tesler]

And also the 'Empty' model if possible.

[Adam Benson]

You saved me hours. Thanks!