HTTPApi + Serverless Framework + API Gateway CORS not working

Question

I have an HTTPApi API Gateway created with the Serverless Framework. But for some routes, the CORS is not working.

provider:
  name: aws
  runtime: nodejs12.x
  stage: dev
  region: us-west-2
  timeout: 29
  httpApi:
    cors:
      allowedOrigins:
        - '*'
      allowedMethods:
        - GET
        - OPTIONS
        - POST
        - PUT
        - DELETE
      allowedHeaders:
        - Content-Type
        - X-Amz-Date
        - Authorization
        - X-Api-Key
        - X-Amz-Security-Token
        - X-Amz-User-Agent
        - X-Transaction-Key
        - Access-Control-Allow-Origin

I tried setting the cors:true option on the provider but still doesnt work. This is the response returned on all routes wether it is 4xx or 2xx codes.

return {
    statusCode: StatusCode,
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials" : true,
      "Access-Control-Allow-Headers" : "*",
      "Access-Control-Allow-Methods": "OPTIONS,POST,GET,PUT,DELETE"
    },
    body: JSON.stringify(Res, null, 2),
  };

If I check the console I can see that the options are indeed applied However, some routes actually work And some others don't, the ones that don't work have the X-Transaction-Key header and the OPTIONS does not return the access-control-allow-headers: authorization,content-type,x-amz-date,x-amz-security-token,x-amz-user-agent,x-api-key,x-transaction-key header

What am I missing? Thanks in advance

Uretic

Go to API gateway in AWS and enable CORS on all the resource – Scots

API gateway did not work for me as expected, so I ended up using the API or code level passing of allowed origins and headers, but anyone can please point to the downside of this, would be helpful – Typhoid

Answer 1

I have faced a similar problem. After 3 days of pulling my hair. I have found my problem. Everything was ok except, In my client, there were few wrong URLs(spelling mistakes) pointing to my server API. This is why few API was ok and few of them not working properly.

After fixing to the right URL everything is ok. Here is my learning, hope someday it will help others:

1. Check you're serverless.yml file's cors section, here is an example

    cors:
       origin: '*'
       headers:
         - Content-Type
         - X-Amz-Date
         - Authorization
         - X-Api-Key
         - X-Amz-Security-Token
       allowCredentials: false
   

2. Check Lamdba for proper response header as question contains

Additional Tools for troubleshooting:

• https://aws.amazon.com/premiumsupport/knowledge-center/api-gateway-cors-errors/

• https://aws.amazon.com/premiumsupport/knowledge-center/support-case-browser-har-file/

• https://toolbox.googleapps.com/apps/har_analyzer/

Hope it will be helpful, Thanks!

Happy Coding

Kunz

Yes, that is correct. I discovered the problem later and solved it the same way but didn't update my question. I think that this happens whenever non-standard or custom headers are added to the request. My problem was that I had an additional header – Uretic

For me the problem was an extra / in the url! – Guyguyana

Answer 2

I faced the same problem. Please check whether you are sending all the correct Headers. If any additional header you send and don't fine tune the cors config you will get a CORS error

For me I had a typo with Authorization header. Took me 3+ days to figure it out lol!

Please check this link for detailed documentation and how to fine tune cors for httpAPi https://www.serverless.com/framework/docs/providers/aws/events/http-api

Peerage

Answer 3

I was beating my head against the wall on this issue, and only managed to get the AWS deploy and a local environment working with CORS by doing the following:

• Start over, using Serverless's Flask API (+ DynamoDB, if you like; that's what I did) template. This will deploy pretty much out of the box; if you include the snippet from the SLS docs to serverless.yml:

provider: 
  httpApi: 
    cors: true

• CORS worked on the APIGW endpoint after sls deploy for me, but not running locally with sls wsgi serve. So I ran Flask locally instead via flask run, adding flask_cors using the decorator only: @cross_origin(). I.e., I did not run flask_cors.CORS(app).

• Running this way, both the preflight (OPTIONS) and POST calls are working fine, with CORS enabled, both locally and in API Gateway/Lambda/SAM stack deployed by severless.

Quintuplicate

Answer 4

Have you tried fixing the 'cors: true' value in the function event as in Serverless with cors ?

Hest