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

We have a bug right now where failed requests to API Gateway won't include the appropriate CORS headers, which masks the actual error on the request.

I'd add to what Ken said and make sure you've thoroughly tested the API and resources in the console and also on the deployed version using Postman or some other client that isn't a browser. I expect there is an issue with the API itself and that your CORS configuration is correct.

Answer 2

Response should have, If you are using AWS lamda, set response headers as follows. Configuration on API Gateway only will not work

headers: {
            'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*',
        },

Answer 3

I am using AWS sdk for uploads, after spending some time searching online i stumbled upon this thread. thanks to @lsimoneau 45581857 its turns out the exact same thing was happening. I simply pointed my request Url to the region on my bucket by attaching the region property and it worked.

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });

Answer 4

As Jack Kohn pointed out the AWS console does not add the CORS headers on non 200 response, and apparently does not allow you to add any custom header.

I was able to enable CORS headers on failed request by exporting to swagger and manually editing the file (Just copied the 200 response) and importing it back.

The responses should look like this:

  responses:
    200:
      description: "200 response"
      schema:
        $ref: "#/definitions/Empty"
      headers:
        Access-Control-Allow-Origin:
          type: "string"
    401:
      description: "401 response"
      schema:
        $ref: "#/definitions/Empty"
      headers:
        Access-Control-Allow-Origin:
          type: "string"
  x-amazon-apigateway-integration:
    responses:
      default:
        statusCode: "200"
        responseParameters:
          method.response.header.Access-Control-Allow-Origin: "'*'"
        responseTemplates:
          application/json: "__passthrough__"
      Authentication Failed.*:
        statusCode: "401"
        responseParameters:
          method.response.header.Access-Control-Allow-Origin: "'*'"
        responseTemplates:
          application/json: "__passthrough__"

Hope this helps.

Answer 5

I have the this problem...I enable CORS, the Test work as it is sending the headers, but when I call it from my app it fails and no headers found on the response.

it is because after set CORS you have to DEPLOY the API. I Deplyed the API and everything works great.

Answer 6

I was struggling with the same issue when 'POST' to API Gateway. But I found the fix for the issue.

After enabling CORS for the method resource, and after adding the necessary Headers e.g. 'Access-Control-Allow-Origin' = '*' wildcard, and it still fails.

Go to OPTIONS of that resource you are invoking, 'GET', 'POST', etc..click the "Method Request" pane of that resource, set API Key = FALSE, do NOT have the API Key set to true. This will cause the CORS error.

Reason, OPTIONS is technically not a method, it a browser function to execute the Preflight request, thus during the Preflight the browser does not know what API key to send, it will know only know after the response is return to the browser of 'Access-Control-Allow-Origin' = '*' then it will look up the code for the HTTP req to setHeaders of the X-Api-Key = some value.

Note: the invoke method itself, 'POST', etc.. can have the API Key = True, which is perfectly fine.

Hope this help those who are struggling as I did for a while :)