CORS error using fetch API - React create app

Question

I'm consuming an API using fetch but i'm getting CORS error. I tried multiples headers, but I'm not understading what's the problem.

I'm not the owner of the API, so I couldn't change it, but checking the response it's returning access-control-allow-origin.

Following is my request method:

export const execPOST = (url, body) => {
  return fetch(url, {
    method: "POST",
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(body)
  });
};

The response is:

Request URL: http://api
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: ip
Referrer Policy: no-referrer-when-downgrade
Response Headers:
Access-Control-Allow-Origin: *

Isn't this response above enough to allow my request?

console error:

OPTIONS http://api net::ERR_ABORTED 405 (Method Not Allowed) Access to fetch at 'http://api' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I got this working (meanwhile I develop) using "https://cors-anywhere.herokuapp.com/", but I don't think that I should use this for production enviroment.

I found a lot of material about this problem, but nothing that worked besides implements a backend to make the request or use something else as a proxy to make the request and so on...

What makes you say you are getting a CORS error?... Apparently the error is because the endpoint you are targeting does not allow the method. Can you try using a rest client to debug? — Carlos Alves Jorge
– Carlos Alves Jorge, Commented May 9, 2019 at 21:14
I edited my question adding chrome console log. Using postman or soapui it works — Victor Bello
– Victor Bello, Commented May 9, 2019 at 21:21
The API isn't responding to OPTIONS requests (otherwise known as preflights.) To avoid preflights, do not set custom headers. — user400654
– user400654, Commented May 9, 2019 at 21:27
Setting the Access-Control-Allow-Origin header in your request makes no sense...this is a header the server sets to indicate whether you are allowed to access the URL via a cross-domain request or not. It's an essential part of CORS security. If the requestor could set the header to whatever they wanted then clearly it would not provide any security — ADyson
– ADyson, Commented May 9, 2019 at 21:40

Vibhas · Accepted Answer · 2021-09-23 07:43:47Z

10

Update code as given below (use 'mode' with the value 'no-cors' ):

For more details follow the link => https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

export const execPOST = (url: string, body: any) => {
  return fetch(url, {
    mode: 'no-cors',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(body)
  });
};

edited Sep 23, 2021 at 7:43

answered Jul 31, 2019 at 10:25

Vibhas

1452 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Panos Over a year ago

no, it is not correct, no-cors value cannot work simultaneously with 'application/json' developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

callmekatootie Over a year ago

@Panos Although the documentation does say that, I am able to send json data with no-cors on Google Chrome. Weirdly, if I set mode to cors, it complains about CORS issue

braza · Accepted Answer · 2019-05-09 21:15:52Z

4

CORS headers are set by the API to protect users from malicious code making requests to sites on their behalf.

This means that you cannot enable or disable it from the client side as the Access-Control-Allow-Origin header is a server side only header.

If you don't have access to the API to change the headers then you won't be able to use the API from the client side.

In production you would have to create your own API that will handle the requests to the API you are trying to contact.

edited May 9, 2019 at 21:15

answered May 9, 2019 at 21:09

braza

4,7221 gold badge29 silver badges39 bronze badges

6 Comments

user47589 Over a year ago

This means that you cannot disable it from the client side Can I suggest amending this line to say "enable or disable".

user47589 Over a year ago

If you don't have access to the API to change the headers then you won't be able to use the api. This isn't quite true; CORS only applies to browser requests. A proxying API endpoint on the hosting server isn't bound by CORS rules.

braza Over a year ago

Thanks @Amy, I've updated it to mention the client side

Victor Bello Over a year ago

Thanks for your reply. Like I posted in my question, the server is already returning "Access-Control-Allow-Origin". Isn't this enough to client-side request to work?

braza Over a year ago

From the error message it's likely that the server hasn't implemented a response to the preflight OPTIONS request, meaning that you get method not allowed and a CORS error. Either way it is not something you can fix if you can't make changes to the server. You will have to implement a backend solution to proxy the requests to the API.

|

Collectives™ on Stack Overflow

CORS error using fetch API - React create app

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related