Firefox extension request is interpreted as CORS

Question

When porting my Chrome extension to a Firefox web-extension, I can't make any network requests because they are blocked by the same origin policy.

As an example:

const headers = {"content-type": "application/json" };
window.fetch(myDomain + "/api/v3/token", { method: "GET", headers: headers });

This fails with the following error:

Is there a way to configure the Firefox extension to not consider these requests CORS? The same code works just fine as a Google Chrome extension.

This holds true even if the request goes to localhost.

I have tried this with jquery's $.ajax method and axios library to get the same result (works in Chrome, doesn't work in Firefox) so I don't think the problem is limited to the window.fetch API.

EDIT: I know that I can add a CORS handler on the server side, but I'm trying not to do that. And why does this work in Chrome and not in Firefox?

EDIT 2: The extension is a popup

Answer 1

This is documented here: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions

In short you need to add a host permission for localhost to mame same-origin requests by default. I don't know why Google Chrome handles this differently.

Answer 2

For anyone who come across this issue in 2022:

Chrome is deprecating manifest V2 in favor of v3. So you'll probably end up using

host_permissions: ["*://domain/*"]

Firefox does not support manifest v3 yet (as of april 2022), you need to use:

permissions: ["*://domain/*"]

HOWEVER

If, like me, you were (successfully) specifying the port while working with chrome (i.e http://localhost:4000/*), it will not work with firefox. You need to use http://localhost/* instead, which works with both chrome and firefox.