I'm trying to call some APIs with fetch in my javascript code. I'm developing with ReactJs in my machine and have another development in the same network developing the API with in another machine. With postman, I can call the API, but with fetch no. I try to call another API in other server and the result was successful.

I'm using fetch and tried to use axios too. I have found in other question in stack overflow this API: . The answer says to try to fetch they and I try but throw same error again.

My code to fetch the gturnquist API:

const myHeader = new Headers();
myHeader.append('Content-Type', 'application/json');
fetch('', {
  method: 'GET', headers: myHeader,
})
 .then((res) => {
   console.log(res);
   return {};
 })
 .then(res => console.log(res));

and my code to fetch the API that i need:

const myHeader = new Headers();

const token = 'mytoken';
myHeader.append('id-tenant', token);
myHeader.append('Content-Type', 'application/json');

const id = 'myid';
const url = 'myurl';

fetch(`/${url}/${id}`, {
  method: 'GET',
  headers: myHeader,
}).then(res => res.json()).then(res => console.log(res));

I have this errors when I try to call an API

OPTIONS 503 (Service Unavailable)

Access to fetch at '' 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.

Uncaught (in promise) TypeError: Failed to fetch

It's a server side error or javascript error?

In my server, the API is configured like the answer of Rajkumar Peter

EDIT: My network error

Questions i have see to try handle my error:
Fetch CORS error with instagram api
Enable CORS in fetch api
managing CORS with fetch API GET request
React fetch has error fetch was blocked by CORS policy
Response to preflight request doesn't pass access control check

I'm trying to call some APIs with fetch in my javascript code. I'm developing with ReactJs in my machine and have another development in the same network developing the API with in another machine. With postman, I can call the API, but with fetch no. I try to call another API in other server and the result was successful.

I'm using fetch and tried to use axios too. I have found in other question in stack overflow this API: https://gturnquist-quoters.cfapps.io/api/random. The answer says to try to fetch they and I try but throw same error again.

My code to fetch the gturnquist API:

const myHeader = new Headers();
myHeader.append('Content-Type', 'application/json');
fetch('http://gturnquist-quoters.cfapps.io/api/random', {
  method: 'GET', headers: myHeader,
})
 .then((res) => {
   console.log(res);
   return {};
 })
 .then(res => console.log(res));

and my code to fetch the API that i need:

const myHeader = new Headers();

const token = 'mytoken';
myHeader.append('id-tenant', token);
myHeader.append('Content-Type', 'application/json');

const id = 'myid';
const url = 'myurl';

fetch(`http://10.1.1.35/${url}/${id}`, {
  method: 'GET',
  headers: myHeader,
}).then(res => res.json()).then(res => console.log(res));

I have this errors when I try to call an API

OPTIONS http://10.1.1.35/url/id 503 (Service Unavailable)

Access to fetch at 'http://10.1.1.35/url/id' 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.

Uncaught (in promise) TypeError: Failed to fetch

It's a server side error or javascript error?

In my server, the API is configured like the answer of Rajkumar Peter

EDIT: My network error

Questions i have see to try handle my error:
Fetch CORS error with instagram api
Enable CORS in fetch api
managing CORS with fetch API GET request
React fetch has error fetch was blocked by CORS policy
Response to preflight request doesn't pass access control check

• javascript
• reactjs
• fetch-api

• try firefox plugin CORS Everywhere – mahradbt Commented May 30, 2019 at 13:52
• I try a plugin in chrome like this, but not work. – Carlos Adriano Miranda Commented May 30, 2019 at 14:11
• Allow-Control-Allow-Origin: * now is not working on chrome. but I work with CORS Everywhere on firefox and everything is fine. maybe it fixes your problem – mahradbt Commented May 30, 2019 at 14:14
• So when i e to production build, this errors will persist without the plugin? – Carlos Adriano Miranda Commented May 30, 2019 at 14:19
• 1 Please don't add "solved" or similar phrases to your question when you've solved the problem. If someone gave you an answer, accept it. If you found a solution on your own, post an answer (you can also accept your own answer after two days). Accepting answers is also the way to show a question has been solved - editing "solved" into the question is not. – Zoe - Save the data dump Commented Jun 2, 2019 at 10:38

1 Answer 1

When performing an API call from a web browser, it will often do something called a "preflight check". This is essentially where the browser sends a request to your API (ahead of your own API call), to check what it is allowed to do and whether it's even worth sending the actual request.

To do this, it uses the OPTIONS method (instead of GET, POST .etc).

If your API endpoint hasn't been configured to accept OPTIONS requests, then the preflight request from the browser will fail - and it will abort sending your request.

To fix your issue, you need to configure your API to accept OPTIONS methods. You should also check which origins (IP addresses of clients connecting to the API) are allowed.