I am seeing strange behaviour on Firefox when using the fetch API. I don't know if I am doing something wrong, or if I have missed some documentation and what I am trying to do is not allowed.
If I host the page below on localhost, Firefox rejects the fetch and gives TypeError: NetworkError when attempting to fetch resource.
I don't see any fetch requests in either the dev tools, or Wireshark. There doesn't seem to be any further debugging available to diagnose.
By "hosting on localhost", I mean hosted by a local web server (nginx in this case), rather than from the file system. The address bar shows "http://localhost/fetch_localhost_error.html" for example.
Hosting the same page at http://jsbin.com/yowebiyigi/edit?html,output or any other endpoint gives the expected output - the text appears in the div, and I see the fetch request being made in dev tools.
Chrome works correctly in both scenarios which implies both the localhost and remote server is configured correctly for CORS etc (but FF never seems to query the remote anyway).
I have tried both 48 and Nightly (51), both on Windows 7. Unfortunately I don't have access to any other OS right now.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="output"></div>
<div id="error"></div>
<script>
var result = fetch('http://www.randomtext.me/api/')
result.then(
function(response){
return response.json()
})
.then(
function (response) {
document.getElementById("output").innerHTML = response.text_out;
})
.catch(
function(error){
document.getElementById("error").innerHTML = error;
});
</script>
</body>
</html>
This is pretty frustrating as I can't develop fetch-based solutions locally. Can anyone shine any light on what is going on?
It was the damn AdBlock in my case. 3 hours wasted...
Hope someone will find this earlier.
Turns out that I had a configuration issue.
network.http.referer.XOriginPolicy
Should be set to 0 otherwise fetch will fail. I had it set to 1 for reasons I can't remember.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With