Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fetch API rejects with NetworkError when hosted on localhost (Firefox only)

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?

like image 201
Anonymous Coward Avatar asked Aug 15 '16 14:08

Anonymous Coward


2 Answers

It was the damn AdBlock in my case. 3 hours wasted...
Hope someone will find this earlier.

like image 176
Henrikh Kantuni Avatar answered Oct 17 '22 05:10

Henrikh Kantuni


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.

like image 27
Anonymous Coward Avatar answered Oct 17 '22 04:10

Anonymous Coward