I can hit this endpoint, http://catfacts-api.appspot.com/api/facts?number=99
via Postman and it returns JSON
Additionally I am using create-react-app and would like to avoid setting up any server config.
In my client code I am trying to use fetch
to do the same thing, but I get the error:
No ‘Access-Control-Allow-Origin’ header is present on the requested
resource. Origin ‘http://localhost:3000’ is therefore not allowed
access. If an opaque response serves your needs, set the request’s
mode to ‘no-cors’ to fetch the resource with CORS disabled.
So I am trying to pass in an object, to my Fetch which will disable CORS, like so:
fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'})
.then(blob => blob.json())
.then(data => {
console.table(data);
return data;
})
.catch(e => {
console.log(e);
return e;
});
Interestingly enough the error I get is actually a syntax error with this function. I am not sure my actual fetch
is broken, because when I remove the { mode: ‘no-cors’ } object, and supply it with a different URL it works just fine.
I have also tried to pass in the object { mode: 'opaque'}
, but this returns the original error from above.
I belive all I need to do is disable CORS.. What am I missing?