Our Serverless Framework app is now using infrastructure as code to configure its resources. Though we need to go over one small detail before moving forward.

In the earlier chapters we configured our API endpoints and Lambda functions with CORS. However when we make an API request, API Gateway gets invoked before our Lambda functions. This means that if there is an error at the API Gateway level, the CORS headers won’t be set.

Consequently, debugging such errors can be really hard. Our client won’t be able to see the error message and instead will be presented with something like this:

No 'Access-Control-Allow-Origin' header is present on the requested resource

These CORS related errors are one of the most common serverless API errors. In this chapter, we are going to configure API Gateway to set the CORS headers in the case there is an HTTP error. We won’t be able to test this right away, but it will really help when we work on our frontend client.

Create a Resource

To configure API Gateway errors we are going to add another resource to our serverless.yml.

Add the following to resources/api-gateway-errors.yml.

Resources:
  GatewayResponseDefault4XX:
    Type: 'AWS::ApiGateway::GatewayResponse'
    Properties:
      ResponseParameters:
         gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
         gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
      ResponseType: DEFAULT_4XX
      RestApiId:
        Ref: 'ApiGatewayRestApi'
  GatewayResponseDefault5XX:
    Type: 'AWS::ApiGateway::GatewayResponse'
    Properties:
      ResponseParameters:
         gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
         gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
      ResponseType: DEFAULT_5XX
      RestApiId:
        Ref: 'ApiGatewayRestApi'

The above might look a little intimidating. It’s a CloudFormation resource and their syntax tends to be fairly verbose. But the details here aren’t too important. We are adding the CORS headers to the ApiGatewayRestApi resource in our app. The GatewayResponseDefault4XX is for 4xx errors, while GatewayResponseDefault5XX is for 5xx errors.

This means that for 4xx and 5xx errors, we’ll be returning the CORS headers.

Include the Resource

Now let’s include the above CloudFormation resource in our serverless.yml.

Replace the resources: block in serverless.yml with.

# Create our resources with separate CloudFormation templates
resources:
  # API Gateway Errors
  - ${file(resources/api-gateway-errors.yml)}
  # DynamoDB
  - ${file(resources/dynamodb-table.yml)}
  # S3
  - ${file(resources/s3-bucket.yml)}
  # Cognito
  - ${file(resources/cognito-user-pool.yml)}
  - ${file(resources/cognito-identity-pool.yml)}

Make sure this is indented correctly. The resources: block is a top level property.

Now we are ready to deploy our new serverless infrastructure.