Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);

})();
like image 527
Table Flip Jerry Avatar asked Dec 06 '22 08:12

Table Flip Jerry


2 Answers

Manifest version 3 uses the host_permissions field

"host_permissions": ["https://api.com/*"],
like image 119
Thomas Avatar answered Dec 07 '22 22:12

Thomas


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.

like image 24
user14754857 Avatar answered Dec 07 '22 20:12

user14754857