CORS Error trying to access API gateway that triggers a Lambda function from NextJS App with Axios - axios

Question

I have this Lambda function that can be triggered by API Gateway configured with the Serverless framework. The error I get on Access to XMLHttpRequest at '<THE_ENDPOINT>' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response This is how I use Axios in the Next App:
const handleSignUp = async (email, password) => {
const response = await Axios.post(
`${API}/signup`,
{
email,
password,
},
{
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
}
);
console.log(response);
};
This is my serverless.yml config file. I have tried to enable CORS manually from API Gateway console, but this is what it looks like.. When I make request with POSTMAN, it works normally.

Answer 1

Access-Control-Allow-Origin doesn't belong on the request header. It belongs on the response from the server, not part of the request from the browser. Adding it to the request is trying to tell the server what origins are allowed, but it's the server's job to say from where it will accept requests.
The Preflight Response is a clue that it's erroring out on the Options method.
I believe it's failing because you are trying to pass a header to the Options method that it's not looking for / isn't allowed. Try removing that header from the axios request and adding it to the APIGW response instead.
Under the Options method, check the Method Response and make sure you have Access-Control-Allow-Origin added to the Response Headers. Still on the Options method, check the Integration Response Header Mappings and add your allowed origin '*' (or a specific domain).
Don't forget to deploy your changes and wait a few moments for the change to propagate before testing.