CORS on multiple methods in same function

Serverless Framework
1

Hi,

I think this is related to this issue: https://github.com/serverless/serverless/issues/1960
I am trying to organize my CRUD functionalities into one function. However, I am having problems with CORS. I always get this error:

Fetch API cannot load https://xxxx.execute-api.ap-southeast-1.amazonaws.com/prod/v1/xxx. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access

Can someone help me pls? Thanks

2

It’s much more likely you’re simply not setting the Access-Control-Allow-Origin header. Are you setting the header in the response?

{
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": true
  },
  body: JSON.stringify({ ...return object goes here... })
}

Don’t forget to also set cors: true inside your serverless.yml.

3

Yup, I did that. It works on single function and single method approach, but not on multiple methods in same function. I want something like this:

users:
    handler: handler.main
    events:
      - http:
          path: v1/users
          method: post
          cors: true
          
      - http:
          path: v1/users/{id}
          method: get
          cors: true
         
      - http:
          path: v1/users
          method: get
          cors: true

      - http:
          path: v1/users/{id}
          method: put
          cors: true

      - http:
          path: v1/users/{id}
          method: delete
          cors: true
2 Likes
4

If you’re routing everything through a single Lambda then you can simplify the config by dealing with invalid method/path combinations in the Lambda. This reduces your config to:

users:
    handler: handler.main
    events:
      - http:
          path: v1/users
          method: any
          cors: true
      - http:
          path: v1/users/{id}
          method: any
          cors: true

I wrote a post back in December about doing exactly what you’re trying to do. It didn’t have CORS support then but I’ve just added that. You get view it here including the source/settings (all tested).

If you’re still stuck then can you post your Lambda source?

1 Like
5

Your github link is not available.

Though, I tried your solution, but still doesn’t work.

6

What browser are you using?

Can you paste the error message here?

Can you make your code public (both the handler and the serverless.yml)?

7

Using Chrome -

landing.png1340×521 67.7 KB

8

The real problem is the 502 error from your API. Something is going wrong in your handler and the API Gateway is generating the response rather than your Lambda so the headers aren’t being set. Sort that out and it should work.

Here are a few things I can see:

Your main function shouldn’t be async.

export async function main(event, context, callback) {

Your main function doesn’t return a result (by calling callback) under all circumstances. If you’re using lambda proxy integration then it’s your responsibility to return an error.

In main you’re calling:

return handlers[httpMethod](event, context, callback);

which calls

async function listItems(event, context, callback) {

but listItems is async so you should await the result. Having said that, I actually think you don’t want it to be async either as you’re returning via the callback.

Hopefully this help.

9

Thanks for checking it out. But this code works if there is a single method in a function.