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

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

XMLHttpRequest cannot load https://xxxxxxxxx.execute-api.us-west-2.amazonaws.com/development/signup. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://yyyyyyyyy.com.s3-website-us-east-1.amazonaws.com' is therefore not allowed access.

I don't get any errors when I use Postman to make requests, despite I have set origin header or not. How can I fix this problem?

Solution 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.

Solution 2:

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.