Amplify-js: Sending a post request with AWS Amplify blocked by browser CORS policy?

[fireflysemantics]

* Which Category is your question related to? *
API

* What AWS Services are you utilizing? *
API Express Server
* Provide additional details e.g. code snippets *
I'm attempting to test out the example from the documentation.

// using serverless express
app.post('/myendpoint', function(req, res) {
  console.log('body: ', req.body)
});

However when I attempt to hit this endpoint with:

    let params = { // OPTIONAL
      body: {
        foo: 'The Foo',
        boo: 'The Boo',
        pity: 'Pity the Foo'
      }, // replace this with attributes you need
      headers: {
      }
    }

    API.post('stripeapi', '/myendpoint', params).
    then(console.log).catch((e)=>(
      console.log(e)
    ))
  }

The browser produces the following error:

Access to XMLHttpRequest at 'https://szxjza7hz5.execute-api.us-east-1.amazonaws.com/loco/myendpoint' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Thoughts?

Also asked this question on Stackoverflow:

https://stackoverflow.com/questions/60273810/sending-a-post-request-with-aws-amplify-blocked-by-browser-cors-policy

I'm using the generated express server configuration.

[fireflysemantics]

Also enabled CORS via the console, but I'm still getting blocked. Described it further here:

https://stackoverflow.com/questions/60291606/blocked-by-cors-policy-in-chrome-after-enabling-cors-for-lambda-function

[fireflysemantics]

I think this was caused by me "Thinking" that /myendpoint had been deployed, but it actually never was. I created an additional issue with the related question here:

https://github.com/aws-amplify/amplify-js/issues/4949

[fireflysemantics]

So IIUC the steps to adding a new endpoint using the same lambda function are:

1 ) Run amplify update api
2) Add a new endpoint - for example /customers
3) Add the /customers REST methods to the express server

And that's it. I think that's how it's done. I'm still testing it out. I'll put a final comment in assuming it works.

[tkampour]

I had the same issue. On your stackoverflow question I can see you are using lambda. I found the answer at:
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Make sure on the API gateway CORS is enabled and that the lambda function allows CORS on the response as well.

[kaden-weber]

thanks @tkampour! Including access-control-allow-origin': '*' in my lambda's response headers was the last thing I was missing.