CORS problem in background.js

[Peter Kellner]

I know this has been talked about a lot but I'm still confused. I thought that as long as I do my URL GET requests in my background.js that I'm OK.  I'm using fetch with the code below and I'm still getting a CORS error. I'm trying to reach into a local router (intranet side) to get traffic stats and they most of a cross-site scripting policy on the router.  I can get the data I want (it's just an html page) when I call using NodeJS by itself so I know my endpoint is clean.

I did try adding to my header mode: 'no-cors' and that just gave me a response of "opaque" and a status of 0 (not 200). 

I have read this at least 3x and I keep thinking it says I will always be able to do Cross-Origin requests  https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

Here is my code that gives me a CORS error:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  let headers = new Headers();
  headers.append('Authorization', 'Basic ' + btoa(username + ":" + password));
  headers.append("Content-Type","text/plain");
  var url = "http://172.16.0.1/show_traffic.htm";
  fetch(url, {
    headers: headers
  })
    .then(function(response) {
      if (response.status !== 200) {
        console.log(
          "Looks like there was a problem. Status Code: " + response.status
        );
        return;
      }
      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    })
    .catch(function(err) {
      console.log("Fetch Error :-S", err);
    });
  return true; // Will respond asynchronously.
});

And the error:

Access to fetch at 'http://172.16.0.1/show_traffic.htm' from origin 'chrome-extension://lfjdabjkhbhdbnfgohpbaghohmimbgme' has been blocked by 

CORS policy: Response to preflight request doesn't pass access control check: No

 'Access-Control-Allow-Origin' header is present on the requested resource. 

If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[Chrome Developer]

You need to add to your server (nginx|nodejs|other)

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Headers *;

You can specify add_header Access-Control-Allow-Origin chrome-extension://lfjdabjkhbhdbnfgohpbaghohmimbgme or any other rule.

[Peter Kellner]

This is a netgear orbi router that is serving this. I have no control of it. I thought that backgtound.js will not have CORS problems.

[Eric]

This is similar to an issue I hit.  From what I've been able to tell the background.js page will allow CORS but will set origin:<extensionid>... which kind of defeats the whole point.  There are so many bug reports about this issue it's hard to tell if it's a bug or a feature.  It's a mess.  

You can get around it by registering for onBeforeSendHeaders and setting the origin to the correct domain.  Here's an example. https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/I4Rp0QmoiCk

Hopefully, we get some sort of explanation on this soon.

[Chrome Developer]

You can try to use <all_urls> permission.

[Peter Kellner]

I’m not following. Please elaborate.

[Chrome Developer]

Add "permissions": ["<all_urls>"] to your manifest file.
It will prevent from sending cors headers.

[Peter Kellner]

worked! thanks