Serverless Framework with AWS cognito generates CORS error

Question

I get this error message from the Angular frontend and I am not authorized to touch my lambda code:

`Access to fetch at \'https://testapicd.***.***.com/local         


        

Answer 1

I have wrestled with this problem for hours (if not days) before and it turned out not only I had to enable cors on the serverless.yml file but also add the response headers as attributes in the object you return from your Lambda.

Something like this should do it:

const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify({
      product: product
    }),
  };

This article saved my life back then and I hope it saves yours!

Answer 2

The CORS error is thrown when you are making requests to servers in other domains. Depending on the server you are using to host the angular code there are many ways you can solve this.

You can try this google chrome extension to see if you can effectivelly fix the problem by ignoring the CORS errors.

One of the most commons ways to solve this problem is to configure a proxy server, but you can also solve it by whitelisting your test domain manipulating the header Access-Control-Allow-Origin in your requests.

Answer 3

This line in serverless.yml

arn: ${file(config.${self:provider.stage}.json):userpoolarn}

Should have been

arn: ${file(config.${opt:stage}.json):userpoolarn}