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 "/", 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...

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...

• javascript
• reactjs
• cors
• fetch-api

• 1 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 Commented May 9, 2019 at 21:14
• I edited my question adding chrome console log. Using postman or soapui it works – 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. – Kevin B Commented May 9, 2019 at 21:27
• 1 I think you're just out of luck then. – Kevin B Commented May 9, 2019 at 21:33
• 2 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 Commented May 9, 2019 at 21:40

2 Answers 2

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)
  });
};

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.