0

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

Zoe
  • 23,712
  • 16
  • 99
  • 132
Carlos Adriano Miranda
  • 71
  • 1
  • 12
  • try firefox plugin `CORS Everywhere` – mahradbt May 30 '19 at 13:52
  • I try a plugin in chrome like this, but not work. – Carlos Adriano Miranda May 30 '19 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 May 30 '19 at 14:14
  • So when i come to production build, this errors will persist without the plugin? – Carlos Adriano Miranda May 30 '19 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](/help/someone-answers). If you found a solution on your own, [post an answer](/help/self-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 Jun 02 '19 at 10:38
  • Oh sorry! This will not happen again, thanks! – Carlos Adriano Miranda Jun 03 '19 at 11:14

1 Answers1

5

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.

Alex Mulchinock
  • 1,699
  • 18
  • 24