AWS API Gateway api returns request headers failed error

Question

I am calling API using react.js application. I am getting error from AWS API Gateway about CORS policy:

Access to XMLHttpRequest at 'https://awsapigatewayid.execute-api.ap-south-1.amazonaws.com/staging/top10' 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.

From React App code for call api like:

let options = {
    url: `https://awsapigatewayid.execute-api.ap-south-1.amazonaws.com/staging/top10`,
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-Req-Time': getCurrentTimestamp(),
      'Access-Control-Allow-Origin': '*',
    },
    data: data || {},
  };
  if (isAuthorised) {
    options.headers['X-Auth-Token'] = 'usertokengoeshere';
  }
  const response = await axios(options);

My API from AWS API Gateway:

That is not an API Gateway error, that is your browser blocking the request. Why do you put a Access-Control-Allow-Origin header in the request? See e.g. docs.aws.amazon.com/apigateway/latest/developerguide/… for further info. — luk2302

Florian Franken Florian Franken · Accepted Answer · 2021-02-17T08:58:23

You need to remove the 'Access-Control-Allow-Origin': '*', from your API call, to solve your error, instead add it to your Lambda response. Preferably not with '*' but with your actual Origin.

AWS API Gateway api returns request headers failed error

1 Answers