CODEWITHSUNDEEP
reactjsapi
k10a
k10a

Reputation: 1087

Can't fetch API from React application

I have built API in Google Cloud Function. The CORS error occurs when I try to fetch API directly. Although I added Access-Control-Allow-Origin, it failed.

The error:

'https://xxxxxxx.com' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

const apiURL = 'https://xxxxxxx.com'

const headers = new Headers();
headers.set("Content-type", "application/json");
headers.set("Access-Control-Allow-Origin", "*");

const createRes = await fetch(
  `${apiURL}/testFetch`,
  {
    method: "POST",
    headers: headers,
    body: JSON.stringify({
      test: "test"
    }),
  }
);

Upvotes: 1

Views: 1116

Answers (1)

Alex
Alex

Reputation: 4811

Access-Control-Allow-Origin is a response header. It should be a part of your response, not the request. Please ensure that your API returns the corresponding header.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Upvotes: 2

Related Questions