API Gateway, blocked by CORS policy: No 'Access-Control-Allow-Origin' header

Question

I know this question might be duplicated, but none of the existing question point to anything I'm not doing...

I've deployed an API using the serverless framework, but I'm having trouble with CORS.

I'm doing a get request using axios:

axios.get('https://test.execute-api.us-west-1.amazonaws.com/dev/test?from=2012-01-09T21:40:00Z')
     .then(response => {
       this.data = response.data;
     })
     .catch(error => console.log(error))

And I'm getting the following error:

Access to XMLHttpRequest at 'https://test.execute-api.us-west-1.amazonaws.com/dev/test?from=2012-01-09T21:40:00Z' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What I've already done:

• Made sure there's an OPTIONS method in API Gateway with a method response that looks like this:

• Made sure I deployed those changes.

Also, the response of my Lambda function is returning the following headers:

return events.APIGatewayProxyResponse{
    StatusCode: http.StatusOK,
    Headers: map[string]string{
        "Access-Control-Allow-Origin":      "http://localhost:8080",
        "Access-Control-Allow-Credentials": "true",
    },
    Body: string(jsonEvents),
}, nil

I also tried setting Access-Control-Allow-Origin to '*'

My serverless.yml file has cors: true on each of the function events:

functions:
  deploymentFrequency:
    handler: bin/update/deployment-frequency
    events:
      - http:
          path: deployment-frequency
          method: post
          cors: true
  fetchDeploymentFrequency:
    handler: bin/fetch/deployment-frequency
    events:
      - http:
          path: deployment-frequency
          method: get
          cors: true

What am I missing? Nothing seems to work. The request works fine from Postman and it looks to be including the headers, so this seems to be an issue with the OPTIONS method.

Answer 1

My configuration is:

(event, context, callback) => {
   callback(null, {
      statusCode: (code || 200),
      body: JSON.stringify(resp),
      headers: { 'Access-Control-Allow-Origin': '*'},
   });
}

and it works fine for me. I use to have the same issue as you before, but as long as you define your function with CORS: true and your response contains the header, you should be fine.

Note: Im didnt understand the sintax "map[string]string" and credentials should not be necessary at this case.

Answer 2

It turns out I was ignoring the status code from the response :(

I realized I was actually getting two errors:

• A 406 status code for a missing Content-Type header
• The CORS error

The first error was caused because I wasn't passing the Content-Type header to the request (I had a check in my code I completely forget that expects that header).

The second error was caused because I didn't add the Access-Control-Allow-Origin header to the error response of my function.