fetch: TypeError: NetworkError when attempting to fetch resource - firefox issue

Hi, I have simple function for logout that looks like this

public logoutHandler() {
    fetch('/logout', <RequestInit>{
      method: 'get',
      credentials: 'include'
    }).then((response) => {
      console.log(document.cookie);
      window.location.href = '/login';
    });
  }

It is workin in chrome but in firefox I get “TypeError: NetworkError when attempting to fetch resource.1 (unknown)”. Client side app is on the same server as backend, I’m using https connection with self-signed cert, could it be the issue?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 23
Comments: 22 (1 by maintainers)

Most upvoted comments

On chrome, I’ve got “TypeError: Failed to fetch” On firefox, the same “TypeError: NetworkError when attempting to fetch resource” …

+75

ariden83 on Jun 21, 2017

Can we reopen this ticket? I’m seeing the same error, but only on Firefox. Also, nothing shows up in the Network tab.

+59

fabdarice on Jul 17, 2017

For those who are writing Firefox addon, the solution here helped me, I have to add "*://localhost/*" to permissions key in manifest.json:


  "permissions": [
    "storage",
    "*://localhost/*"
  ],

Chrome just works without the need to add this permission…

+14

sangxxh on Jan 16, 2019

Have you check errors like CORS?

jstoja on Jun 26, 2017

@ariden83 did you figure out what was causing the errors? I’m seeing the same issues in isolated cases

billytianlan on Jul 12, 2017

Check if you are using http or https on your server. For me, the error was coming online with heroku server because they use https while in local machine I was using http and it was working. After choosing https on Heroku for my endpoints, it also worked

Hervera on Mar 17, 2019

There maybe relational link.

Fetch api not working in firefox addon : firefox 1346447 - Fetch api not working within addon

ncaq on Sep 6, 2017

In our case, the solution was not using the wild card for Access-Control-Allow-Origin on the server side, instead of the wild card, our settings look like this:

res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
res.setHeader("Access-Control-Allow-Headers", "Authorization, Cache-Control, Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

thehme on Feb 19, 2019

Having the same issue when I have network.http.referer.XOriginPolicy set to 1 (“send a referrer only when the base domains are the same”). Is that supposed to happen? I’m quite sure the base domain of localhost matches the base domain of itself 😃

jomo on Dec 22, 2017

I’m seeing the same error,except chrome

ganeshangler on Sep 26, 2017

I managed to solve the problem by monitoring the headers returned by github used on the demo page.
Since I’m using a python webserver, they look something like this:

self.send_header("Access-Control-Allow-Origin", "*")
self.send_header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
self.send_header("Access-Control-Allow-Headers", '*');
self.send_header("Status", "200 OK")
self.send_header("Vary", "Accept")
self.send_header('Content-Type', 'application/octet-stream')

Hope it helps.

x011 on Aug 15, 2019

Firefox contains a native fetch implementation and does not use this polyfill code. You can use the Network tab in Firefox’s web console to debug the request and response.

dgraham on Apr 11, 2016