Access-Control-Allow-Origin on chrome extension

I'm making a Chrome extension which pulls data from my own server. It uses about 4 httpRequests at a time, but sometimes I get console error as follows:

XMLHttpRequest cannot load开发者_开发知识库 http://apps.radionsm.lv/apps/system/index.php?request=now. Origin chrome-extension://egkddfmbidfobhchndockbhjancbpfkd is not allowed by Access-Control-Allow-Origin. for everyone sometimes no.

If I send header('Access-Control-Allow-Origin: *'); will this fix it?

---

You're trying to do cross origin resource sharing (CORS). The bad news is that without a server as a middle man there is no way to do this on a normal web page. The good news is that in a chrome extension you can request permission to access any url's you want. Just put something like this in your manifest.json file.

Allow connections to your site:

 "permissions": [
    "http://*.radionsm.lv/"
  ],

Allow connections to any site:

 "permissions": [
    "http://*/"
  ],

When the user installs your extension chrome will inform them of the permissions required in a dialogue box prior to the completion of the install.

---

Chrome Extensions have two "modes" when making cross-domain XHR requests:

1) If the domain is in the "permissions" section of the manifest.json file - The request doesn't have an "Origin" header, and it always succeeds.

2) If the domain is not in "permissions" - The request includes an "Origin" header with the value "chrome-extension://..." This indicates that the request is a CORS request, and the response must have a valid Access-Control-Allow-Origin header in order to succeed.

---

You will need to set up permissions in manifest.json:

  "permissions": [
    "https://example.com/" // if you need a particular site
    "<all_urls>"           // if you need any site (this will incur 
                           // manual review process in Chrome web store, mind you)
  ],

Please note, that since Chrome 85 extn content scripts are subject to the same CORS policy as vanilla web requests. Which means that the only way to do cross-site requests in extn now is to fetch in background script and pass the result to content script:

// Old content script, making a cross-origin fetch:
var itemId = 12345;
var url = "https://another-site.com/price-query?itemId=" +
         encodeURIComponent(request.itemId);
fetch(url)
  .then(response => response.text())
  .then(text => parsePrice(text))
  .then(price => ...)
  .catch(error => ...)

// New content script, asking its background page to fetch the data instead:
chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);

// New extension background page, fetching from a known URL and relaying data:
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery === "queryPrice") {
      var url = "https://another-site.com/price-query?itemId=" +
              encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  });

---

Manifest V3: change permissions to host_permissions:

"host_permissions": [
  "http://*/"
],

---

After spending days on google, finally the solution which worked out for me is this.

1. If you are using Spring boot and you are writing your own CORSFilter class also you are maintaining security java configuration file dont ever write multiple CORS to register in spring.

In my case I had CORSFilter java class as well as below code. http.cors(withDefaults()) // removed this since I already registered CORS.