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

4
  • try firefox plugin CORS Everywhere Commented May 30, 2019 at 13:52
  • I try a plugin in chrome like this, but not work. 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 Commented May 30, 2019 at 14:14
  • So when i come to production build, this errors will persist without the plugin? Commented May 30, 2019 at 14:19

1 Answer 1

6

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.

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

7 Comments

Yeah, sure. But in my server i have this code stackoverflow.com/a/43809068/11544879 that supposed to allow any header, origin and method. OPTIONS not enter in this case?
To clarify, what language was your API built in?
Is build in .net Core 2.2
My ASP.NET isn't fantastic. You shouldn't be getting a 500 error from the OPTIONS request though. So, my assumption at this point would be that there is a problem with the way you've implemented your CORS policies. Are you certain that "Microsoft.AspNetCore.Cors" is available in .net 2.2?
At this point, my only suggestion would be to potentially ask another question - this time centered around configuring your API server. The problem you described isn't with your client - so technically falls outside of the scope of this question, and my expertise.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.