CORS on Serverless yml

Question

I have a React application and trying to access to serverless from aws. But I have below error

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.test.com' is therefore not allowed access. The response had HTTP status code 502.

End point url is https://key.execute-api.ap-southeast-2.amazonaws.com/dev/samplefunction

Setting on serverless.yml is

login:
    handler: login.login
    events:
      - http:
          path: login
          method: post
          cors:
            origin: 'https://admin.differentdomain.com'
            headers:
              - MY_CUSTOM_HEADER
              - Content-Type
              - X-Amz-Date
              - Authorization
              - X-Api-Key
              - X-Amz-Security-Token

Is there any other place I need to do CORS configuration?

If you're using lambda proxy integration, your lambda code will need to add the `Access-Control-Allow-Origin` header to the response. I don't think there's anywhere else in your serverless template you need to put CORS related items. — Mike Patrick, Jun 08 '18 at 17:32
Should I add the header on yml file or login function response? — Lee, Jun 08 '18 at 19:55
In your lambda code, the response object you pass to `callback` needs to supply this header. So instead of `{statusCode: 200, body: {} }`, you want `{statusCode: 200, headers: {Access-Control-Allow-Origin: "*"}, body: {} }`. Assuming you're using lambda proxy integration. — Mike Patrick, Jun 08 '18 at 20:04
I added headers: { 'Access-Control-Allow-Origin': 'https://admin. differentdomain.com', 'Access-Control-Allow-Credentials': true, } but still not working — Lee, Jun 09 '18 at 10:23
@Lee, you are using credentials. In your serverless.yml, you need to add `allowCredentials: true` under `cors:` instead of just doing `cors: true`. Adding the header in your code is also needed, so keep that. But that isn't even invoked for the preflight CORS requests, so you need this one in addition. — V Maharajh, May 28 '21 at 22:41
I had the same but completely different situation. I was using an invalid `x-api-key` value sent by the client for testing. And that also resulted in `No 'Access-Control-Allow-Origin' header is present on the requested resource.` Was looking for an hour to find out it had to do with an invalid 'x-api-key' header value. After sending a correct key it was working. The only header from the lambda function I needed to return was `"Access-Control-Allow-Origin": "*"` — A.W., Jul 15 '21 at 12:10

score 15 · Accepted Answer · answered Apr 15 '19 at 14:08

CORS setup in Serverless is explained in detail here: https://serverless.com/blog/cors-api-gateway-survival-guide/

In addition to the config in serverless.yml (which is for the preflight requests) you need to return the headers Access-Control-Allow-Origin and Access-Control-Allow-Credentials from your code. In your example and a Node.js implementation:

  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': 'https://admin.differentdomain.com',
      'Access-Control-Allow-Credentials': true,
    },
    body: {},
  };

Make sure to include the "https" part in the first header, I have stumbled over this previously.

score 0 · Answer 2 · answered Sep 03 '23 at 07:17

I had issues having it work with a private endpoint. I was setting cors: true, which by default has an allowCredentials: false. Instead I had to expand the cors field like this:

functions:
  api:
    handler: main.handler
    events:
      - http:
          path: "/api/v1/{endpoint}"
          method: post
          private: true
          cors:
            origin: '*'
            headers:
              - Content-Type
              - X-Amz-Date
              - Authorization
              - X-Api-Key
              - X-Amz-Security-Token
              - X-Amz-User-Agent
              - X-Amzn-Trace-Id
            allowCredentials: true

CORS on Serverless yml

2 Answers2