API Gateway, blocked by CORS policy: No 'Access-Control-Allow-Origin' header
Solution 1
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.
Solution 2
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.
Solution 3
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
Carlos Martinez
Updated on June 29, 2022Comments
-
Carlos Martinez almost 2 years
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.
-
dataviews over 3 yearsthank you! Adding the Access-Control-Allow-Origin helped with my error