Firefox error: NetworkError when attempting to fetch resource only from extension

Question

I'm currently developing an extension for firefox/chrome that requires fetching some data from another website.

The extension seems to work fine from Chrome, however, I'm getting "NetworkError when attempting to fetch resource" when trying the extension from firefox.

If I execute the code from the console, it works just fine, the issue is only from the extension.

CORS is enabled on the server, any idea of what the source of the problem can be?

Serverside relevant code:

router.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  if (req.headers.authorization !== '***') {
      return res.status(403).json({ error: 'Unauthorized request' });
  }
  next();
});

Clientside relevant code:

fetch('https://host:port/api/somepath', {
    headers: new Headers({
        Authorization: '*****',
    }),
})
.then(....

Firefox error:

Error: TypeError: NetworkError when attempting to fetch resource

Extension manifest permissions:

"permissions": ["storage", "activeTab", "declarativeContent","webRequest", "webRequestBlocking", "webNavigation"],

Answer 1

The "<all_urls>" permission gives you access to every website someone goes to which is overkill. All you need to add for Firefox is the URL you are trying to call in the fetch (e.g., "https://host:port/api/somepath" in your example)

Resulting Extension manifest permissions:

"permissions": [
  "storage", 
  "activeTab", 
  "declarativeContent",
  "webRequest", 
  "webRequestBlocking", 
  "webNavigation",
  "https://host:port/api/somepath"
],