0

I have an API Gateway built on AWS, with various resources & methods already properly reaching to Lambda endpoints.

As I try to make a POST request on React to the API, everything works smooth. However, GET request provides CORS Error: HeaderDisallowedByPreflightResponse when I call the function.

Final details to add:

  • I tested my code on NodeJS and surprisingly the error is not generated, fetch works smooth.
  • I made sure to enable CORS at Amazon API Gateway. Deployed it properly, as it works at NodeJS
  • I added "Access-Control-Allow-Headers": "Origin, X-Api-Key, X-Requested-With, Content-Type, Accept, Authorization" together with other details suggested (Origin,Methods) NodeJS works smooth, React still generates same error.

What am I doing wrong? Is this a general CORS limitation, React issue, Browser issue, or something to do with my code?

My source code on React (this one generates the error):

  async function getUserGroups() {
    try {
      const response = await fetch(APIroot + "/user" + "?userID=mymail@gmail.com", {
        method: 'GET',
        headers: {
          "accept": 'application/json',
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "POST, PUT, PATCH, GET, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, X-Api-Key, X-Requested-With, Content-Type, Accept, Authorization"
        },
      });

      if (!response.ok) {
        throw new Error(`Error! status: ${response.status}`);
      }

      const result = await response.json();
      console.log(result);
      return result;
    } catch (err) {
      console.log(err);
    }
  }

My source code on NodeJS (this one fetches the data):

async function getUser() {
    try {
        const response = await fetch(APIroot + "/user" + "?userID=mymail@gmail.com", {
            method: 'GET',
            headers: {
                "accept": 'application/json',
                "Access-Control-Allow-Origin": APIroot + "/user",
                "Access-Control-Allow-Methods": "GET",
                "Access-Control-Allow-Headers": "Origin, X-Api-Key, X-Requested-With, Content-Type, Accept, Authorization"
            },
        });

        if (!response.ok) {
            throw new Error(`Error! status: ${response.status}`);
        }

        const result = await response.json();
        console.log(result);
        return result;
    } catch (err) {
        console.log(err);
    }
}
kk651
  • 690
  • 6
  • 7
  • `Access-Control-*` headers are **response** headers. Adding them as **request** headers does nothing useful and does mean that the server must grant permission to the preflight for you to include them. Code you run on Node.js that you control is not subject to the restrictions imposed on code you run on Alice's browser when she visits your site. You need the review the fundamentals of what CORS is for. See the duplicate. – Quentin Apr 06 '22 at 13:38
  • "I made sure to enable CORS at Amazon API Gateway." — Assuming that is where you are making the request to, you did it wrong. Your question lacks details of what you did there. – Quentin Apr 06 '22 at 13:40
  • You need to remove all `Access-Control-*` headers from your React and node.js code and make sure CORS is setup correctly on your AWS endpoint. Currently, your browser is saying: "The endpoint I am trying to request does not permit me to add the `Access-Control-*` header to my request." You would get the same error if you were to try to add a `test` header to your request that is not allowed in the CORS policy on the AWS endpoint. Also check out this: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options – ptts Apr 06 '22 at 13:46

0 Answers0