API Gateway: Can't Enable CORS

Question

I can't Enable CORS on my API Gateway instance, this is how it looks:

1. Settings:

2. Result:

I've tried a bunch of things like checking the DEFAULT 4XX and DEFAULT 5XX and manually inputting the Access-Control-Allow-Methods as suggested in some posts.

If I hover over the error I get: Invalid Response status code specified.

I'm able to GET using my browser but POST can only be done from Postman. My ReactJS website won't post either, throwing:

Access to XMLHttpRequest at <ENDPOINT> from origin <S3-REACT-BUCKET> has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've read that I have my React app should send the CORS headers (haven't got to that) but I can't even Enable CORS in the API Gateway!

Answer 1

You can unselect the methods except options and then change the "Access-Control-Allow-Origin" and then click on the enable cors button .there wont be any changes even after you enabled it just redeploy your apis it might work.this worked for me

https://medium.com/geekculture/simple-steps-to-enable-cors-in-api-gateway-through-console-cloud-formation-c09d9df31c07

Answer 2

That was because No Method Response

Answer 3

You shouldn't manually go on the console to enable CORS. Instead follow this guide from the serverless framework.

In short:

• set cors: true in your http event
• return {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Credentials': true} in your handler