A CORS Error?

I’ve set up a serverless function and REST API endpoint to process payments via Stripe.

Every time I try to use the function, I get a POST error with status code 403:

XMLHttpRequest cannot load https://XXXXX.execute-api.us-west-2.amazonaws.com/YYYYY. No 'Access-Control-Allow-Origin' header is present on the requested resource.

This looks like a CORS error.

When you use the Amplify CLI tool to create your function, it delivers a sample Node.js/Express app.

It includes middleware for CORS:

// Enable CORS for all methods
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

I was confused about the error, as CORS was enabled for my POST request function.

Solution?

It turned out that the culprit was missing permissions for the serverless function.

I limited the access to the function to authenticated users with Amazon Cognito.

When the Amplify CLI asks:

  • “Restrict API access?” Yes
  • “Who should have access?” > Authenticated Users Only
  • “What kind of access do you want for Authenticated Users” > create + update

Initially, I just gave update permission. And this rule caused the 403 error.

Further Reading