Not able to access lambda function when invoked with headers

Question

I am using serverless for creating and deploying my lambda functions. I am using Node.js - HTTP API template from serverless. I have created few lambda functions and deployed them using command sls deploy. The functions were deployed successfully and I am able to query lambda function response using postman.

But, when I want to invoke same lambda function through my React webapp (using axios) it is throwing me A CORS Error if I included any headers.

For ex. I want to send Authorization token in header or Content-type as json in header. Any of this doesn't worked.

After this, I have added following headers in my lambda function response

      "Access-Control-Allow-Origin": "*", 
      "Access-Control-Allow-Credentials": true,

After this, in AWS API Gateway console, I have configured CORS with wildcard origin and allowed All HTTP methods. After deploying this setup It's still doesn't worked.

I have also tried tweaking my serverless.yml file but my bad it didn't worked either

No any specific error but it throws `CORS error` in network tab. And in fetch code it throws `typerror` — jackz_sparrow, Nov 09 '22 at 13:23
There should be additional detail with the [CORS error](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors). — jarmod, Nov 09 '22 at 13:25

score 1 · Answer 1 · answered Nov 11 '22 at 17:50

If you want default setting, adding the following snippet should do the trick:

provider:
  httpApi:
    cors: true

For more detailed cors settings (and also for reference what the shortcut above will do), please refer to: https://www.serverless.com/framework/docs/providers/aws/events/http-api#cors-setup

score 1 · Answer 2 · answered Nov 13 '22 at 03:12

I also stumbled across this issue when I was working with serverless. I initiated the project using serverless and then selected the template as Node.js - HTTP API.

Everything is working as expected in postman but not in my FE which is built using Angular 10.

But, then I came across the Node.js - Express template provided by serverless.

It contains bare minimum Express.js code, with availability of configuring CORS as dependency just like classical Node.js server.

I have tried it and it worked like a charm !!!

But, Before using it keep in mind

It will deploy a whole Node.js server as a single lambda function.
Means, all the API's will be inside a single lambda and not as one lambda one API
It will enable manual configuration of CORS

This works in my case because I am not strictly dependent upon several lambda functions. But, it works ! Thanks — jackz_sparrow, Nov 14 '22 at 03:36

score 0 · Answer 3 · answered Nov 14 '22 at 00:57

The settings that you have provided is not compliant with CORS specifications. In order to allow your client to send credentials, Access-Control-Allow-Credentials header has to be set to true. You have done this step correctly. But if you are setting it to true, your Access-Control-Allow-Origin can't be wildcard *. It has to be the specific domain. One way to solve your issue is to:

Create a lambda, which is attached to OPTIONS method of your API gateway route. This lambda should return a header (only if request comes from your own domain. check it in your lambda logic)

     "Access-Control-Allow-Origin": "your_frontend_domain_name", 
     "Access-Control-Allow-Credentials": true,
     "Access-Control-Allow-Methods": "POST,DELETE,OPTIONS,GET" (Add only those methods that you need)

Refer to this SO for steps involved

Add the headers mentioned above in your main lambda function which handles the business logic. Again ensure that the backend received the request from appropriate frontend.
Remove CORS configuration that you set manually on your API gateway.

You can refer to this SO post to implement the header setting and caveats on doing it this way.

Why OPTIONS is needed? - Depending upon the API call, browser will trigger a preflight request before making the actual API call. This comes as an OPTIONS request to your API gateway and it should return correct headers for your browser to make the actual call. For understanding this process better refer to this MDN article

This might work with ‘OPTIONS’ but will it work with other http methods ? — jackz_sparrow, Nov 14 '22 at 03:34
Yes. You have to add it to `OPTIONS` and your main lambda as mentioned in point number 2. Assume that you are creating a POST method using `sls deploy`. Then that POST method also should have this CORS header and **additionally** you have to create an `OPTIONS` method with the settings mentioned in point 1. — user11666461, Nov 14 '22 at 03:48

Not able to access lambda function when invoked with headers

3 Answers3