API Gateway setup for CORS - OPTIONS and Mock

Question

I have a Lambda that supports a GET request and is secured using a Cognito User Pool. I can get a JWT and call the GET successfully. However, I also need to configure CORS, as this API will be called from an Amplify React app.

My Cloudformation template defines the Lambda (AWS::Serverless::Function) and the API Gateway (AWS::Serverless::Api).

The OPTIONS is set up as a Resource, alongside another for "ANY". I can test both of these successfully using the AWS Management Console. However, I can't get a successful OPTIONS request (curl or Amplify-React app) - I always get a 500 response. The logs in CloudWatch say: "Execution failed due to configuration error: Unable to transform request"

The OPTIONS is set up with a Mock, as there is no need to call the Lambda.

Again - the OPTIONS Resource tests ok.

I've exhausted ChatGPT and Amazon Q - and myself!!

Any ideas?

Answer

Ensure you have properties for [CorsConfiguration](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/sam-property-api-corsconfiguration.html) for this AWS Serverless Application Model `AWS::Serverless::Api` - below is an example from the documentation.

```yaml
Resources:
  ApiGatewayApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: Prod
      Cors:
        AllowMethods: "'POST, GET'"
        AllowHeaders: "'X-Forwarded-For'"
        AllowOrigin: "'www.example.com'"
        MaxAge: "'600'"
        AllowCredentials: true
```

API Gateway setup for CORS - OPTIONS and Mock

Relevant content