'Access to fetch has been blocked by CORS policy' Chrome extension error

user_13078927 0
Viewed 11966

I am trying to get data from an external API from the background script of my Chrome extension, using messaging to initiate the call from the content script and get the results. I have no control over the external API. The documentation from that API says to use script tags to get a jsonp response, but if I understand correctly, that shouldn't matter when the below items are implemented. Am I wrong?

  • the fetch() is in the background script
  • "\*://\*/" is in my permissions in the manifest (I will change that if I can get this to work, just eliminating that possibility)
  • The extension is 'packed'

Error: Access to fetch at 'https://external-api.com' from origin 'chrome-extension://bunchofchars' 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.

Any clue as to what I'm doing wrong?

background.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
      fetch('https://api.com/' + request.user + 'restofurl',
          {
            method: 'get',
            headers: {'Content-Type':'application/json'}
          })
//          .then(response => parseResults(response.results))
          .then(response => sendResponse({result: response.results}))
//          .catch(error => ...)
      return true;
  });

content.js

(() => {
    function foo() {

        var parent = document.getElementById('someId');
        var username = parent.getElementsByTagName('a')[6].innerHTML;
        chrome.runtime.sendMessage({user: username}, function(response) {
            console.log(response.result);
        });
    window.addEventListener('load', foo);

})();
google-chrome-extension cors fetch javascript
3 Answers

Manifest version 3 uses the host_permissions field

"host_permissions": ["https://api.com/*"],
user_2649210

Maybe your extension is allowed only to read and modify on this particular site.

Let extensions read and change site data

  • When you click the extension: This setting only allows the extension to access the current site in the open tab or window when you click the extension. If you close the tab or window, you’ll have to click the extension to turn it on again.
  • On [current site]: Allow the extension to automatically read and change data on the current site.
  • On all sites: Allow the extension to automatically read and change data on all sites.

Try to change to the last option. This should change CORS policy.

user_147548570

Ideally, cors issue must be resolved on the server-side by adding specific origins. This is because all modern browsers such as chrome block the requests originating from the same machine.

In this case, however, please try to use additional fetch parameters as follows:

fetch(url, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'no-cors', // no-cors, *cors, same-origin

headers: {
  //'Content-Type': 'application/json'
  // 'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
user_101839250
Related