>
LOADING

API Gateway CORS Configuration with CloudFormation

API Gateway CORS Configuration with CloudFormation

by admin February 21, 2020

One of the benefits of API Gateway, and why we recommend it in our ideal stack, is how easy it is to configure. API Gateway CORS configuration is as simple as checking a few boxes in the console, or adding a few lines to your CloudFormation template.

We STRONGLY recommend using CloudFormation because it allows you to track infrastructure changes in version control, and easily replicate environments. Plus, you don’t have to navigate the AWS Dashboard, which can get cumbersome at times.

First, What is CORS in the first place and why do we need to configure it?

CORS stands for Cross-Origin Resource Sharing, which is a protocol for handling resource requests from one origin, or domain, to another origin. This is extremely helpful for security purposes, and can prevent some egregious vulnerabilities.

In practice, the browser sends what’s known as a preflight request to the server. This preflight request is sent using the OPTIONS HTTP method, and it returns the available methods for a given resource allowed by the server. If the appropriate information is not returned in the preflight request, the browser will not fulfill the request.

Simple CORS Example

To configure CORS, you simply need to add the ` Cors` property to your API Gateway config. Here is a simple example:

 AppApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: Dev
      # enable CORS; to make more specific, change the origin wildcard
      # to a particular domain name, e.g. "'www.example.com'"
      Cors: '*'

 

Alternatively, you can configure CORS using a CORS configuration object:

AppApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: Dev
      # enable CORS; to make more specific, change the origin wildcard
      # to a particular domain name, e.g. "'www.example.com'"
      Cors:
        AllowMethods: "'OPTIONS,GET,POST,PUT,DELETE'"
        AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key'"
        AllowOrigin: "'wwww.example.com'"

Cognito Example

If using Cognito, it’s essential to add `AddDefaultAuthorizerToCorsPreflight: False` to your Auth configuration. This exposes the OPTION method for any API endpoints, and allows the preflight request to successfully execute. Else, your CORS configuration will fail as authorization headers are not added to the preflight request.

AppApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: Dev
      # enable CORS; to make more specific, change the origin wildcard
      # to a particular domain name, e.g. "'www.example.com'"
      Cors:
        AllowMethods: "'OPTIONS,GET,POST,PUT,DELETE'"
        AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key'"
        AllowOrigin: "'wwww.example.com'"
      Auth:
        DefaultAuthorizer: CognitoApiGatewayAuthorizer
        Authorizers:
          CognitoApiGatewayAuthorizer:
            UserPoolArn: 
              Fn::GetAtt:
              - CognitoUserPool
              - Arn
        # Important! Add this line, or you'll have a bad time. 
        # The CORS preflight OPTIONS request will fail. 
        AddDefaultAuthorizerToCorsPreflight: False

 

Check out the completed CloudFormation template on Github.

Social Shares

Related Articles