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
Should I add the header on yml file or login function response? — Lee
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
I added headers: { 'Access-Control-Allow-Origin': 'admin. differentdomain.com', 'Access-Control-Allow-Credentials': true, } but still not working — Lee
@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

Ulli Ulli · Accepted Answer · 2019-04-15T14:08:17

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.

CORS on Serverless yml

1 Answers