AWS API Gateway endpoint gives CORS error when POST from static site on S3

Question

I have created an API endpoint with Serverless(serverless.com) which I expose through API Gateway. I\'m getting following error though I have enabled CORS from the

Answer 1

I had near the same problem,as i posted in another question, I needed to add the following headers to my response:

headers: {
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Access-Control-Allow-Credentials' : true,
            'Content-Type': 'application/json'
        }

And , according to this documentation:

http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

When you use proxy for lambda functions on API Gateway config, the post or get methods have no added headers, only the options method does. You must do it manually in the response(server or lambda response).

Beside that, I needed to disable the 'API Key Required' option in my API gateway post method, as someone here already said.

Answer 2

I would start troubleshooting by inspecting your API in the AWS Console to make sure serverless registered everything the way you expect.

1. Load the AWS Console and navigate to the API Gateway service.
2. Click the API to open it up.
3. Find your /signup resource
4. Make sure you see the OPTIONS method under /signup

5. Click each resource including options and check the following:

   a. Click Integration Response, click the arrow in the first row of the table for 200 to open it up.

   b. Click the arrow to open Header Mappings

   c. Make sure you see Access-Control-Allow-Origin mapped to '*'

If you find this header missing from one of the methods a quick fix is to click back on the /signup Resource and click the Enable CORS button. AWS will build out OPTIONS and the header mappings on all methods for you. Of course you still need to figure out why serverless didn't set things up for you but this will at least get you going.

Another note about the Enable CORS button, if you add another method later you'll have to click it again to re-run the tool to setup your new method with CORS.

Answer 3

You need to enable CORS for all the methods. Means, you need to add below three headers for all your methods

            "headers": {
            "Access-Control-Allow-Origin": {
                "type": "string"
            },
            "Access-Control-Allow-Methods": {
                "type": "string"
            },
            "Access-Control-Allow-Headers": {
                "type": "string"
            }
        }

It is tedious task to add these headers to all your methods in JSON.

Created a utility in Java which automatically adds these headers to Swagger JSON. You can run it before importing it to API Gateway and import the output JSON which has CORS enabled in all the methods

https://github.com/anandlalvb/SwaggerToAPIGateway

I hope this utility may help anyone looking for this to do it easily.