How to enable CORS

Serverless Framework
, ,
1

Hi - I am using the following version of serverless for my lambda project

Framework Core: 1.78.1
Plugin: 3.7.0
SDK: 2.3.1
Components: 2.34.5

I have following in the serverless.yml

  AdminTokenVerify: 
    handler: src/handlers/Admins/auth.auth
  AdminLogin:
    handler: src/handlers/Admins/auth.login
    memorySize: 3008
    timeout: 15
    events:
      - http:
          path: admins/login
          method: post
          cors: true
  AdminRefreshToken:
    handler: src/handlers/Admins/auth.refreshToken
    memorySize: 3008
    timeout: 15
    events:
      - http:
          path: admins/refresh-token
          method: get
          cors: true
          authorizer: 
            name: AdminTokenVerify
            type: token

and in my handler I use

.then((response) => {
        return {
          statusCode: 200,
          headers: {
            'Access-Control-Allow-Origin': '*', // Required for CORS support to work
            'Access-Control-Allow-Credentials': true // Required for CORS support to work
          },
          body: JSON.stringify({
            isSuccess: true,
            data: {
              token: response.token,
              action: response.action
            },
            message: "Login message"
          }, null, 2)
        };
      })

the above example is for the return of the login handler. In the refsh token function return object the headers are the same.
I get response in POSTMAN but when i try with jquery in browser I get →

Access to XMLHttpRequest at ‘https://rmmsyr6o93f.execute-api.eu-central-1.amazonaws.com/dev/admins/login’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

My client code is following

$.ajax
    ({
        dataType: "json",
        method: "post",
        url: url,
        headers: {
            "Content-Type": "application/json"
        },
        data: {email: email, password: password},
        success: function(data) 
        {
            console.log("log response on success");
            console.log(data);
        },
        error: function(err) 
        {
            console.log("log response on error");
            console.log(err);
        }
    });

Also I read the below guide

And tried following in my sertverless.yml

resources:
  Resources:
    GatewayResponseDefault4XX:
      Type: 'AWS::ApiGateway::GatewayResponse'
      Properties:
        ResponseParameters:
          gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
          gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
        ResponseType: DEFAULT_4XX
        RestApiId:
          Ref: 'ApiGatewayRestApi'

But that gives me “Internal Error”

Also I have gone throuigh the following github issue

A little bit of help will be appreciated :slight_smile:

2

After a lot of head banging came to understand that the above is the correct solution…
I just used allowed_headers check box in https://www.test-cors.org/
Once i remove it works fine.