CODEWITHSUNDEEP
goaws-api-gatewayserverless
Carlos Martinez
Carlos Martinez

Reputation: 4510

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

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:

enter image description here

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.

Upvotes: 9

Views: 21441

Answers (4)

Rhay
Rhay

Reputation: 169

In your terminal, go to the root project path and run:

npm i cors

And, after you need put this code in your index.js:

const cors = require("cors"); 
app.use(cors());

Upvotes: 1

Shalauddin Ahamad Shuza
Shalauddin Ahamad Shuza

Reputation: 3657

Enable Lamba proxy integration

return events.APIGatewayProxyResponse{
    StatusCode: http.StatusOK,
    Headers: map[string]string{
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
    },
    Body: string(jsonEvents),
}, nil

enter image description here

Upvotes: 3

Carlos Martinez
Carlos Martinez

Reputation: 4510

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.

Upvotes: 3

Cleriston
Cleriston

Reputation: 770

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.

Upvotes: 5

Related Questions