CORS to fetch .js content - Javascript

Question

I'm trying to get the content of various .js files from a code that runs on the browser (through plugin).

I have no problem getting .js files that reside on the same server, using XMLHttpRequest but when I need to fetch the content of .js files that are on other domains I'm trying to use CORS but I can't seem to get it to work

This is my code

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

// Make the actual CORS request.
function makeCorsRequest(url) {

  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
    alert('CORS not supported');
    return;
  }

  // Response handlers.
  xhr.onload = function() {
    return xhr.responseText;
  };

  xhr.onerror = function() {
    alert('There was an error making the request.');
  };

  xhr.send();
}

When I run:

url = `https://......./javascript.js'
res = makeCORSTRequest(url)

I get the 'There was an error making the request.' error alert, and the console logs

XMLHttpRequest cannot load https://......./javascript.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://.....com' is therefore not allowed access.

Answer 1

Your browser will only let your frontend JavaScript code access responses from cross-origin requests when the servers you’re making the requests to explicitly indicate they’re opting in to receiving cross-origin requests, which they do by sending the Access-Control-Allow-Origin response header in their responses.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.

In cases where a site never sends the Access-Control-Allow-Origin response header, the only way you will be able to get content that site cross-origin is by using a CORS proxy. See the answer at "No 'Access-Control-Allow-Origin' header is present on the requested resource" for details.

Browsers are the only clients that enforce restrictions on cross-origin requests, and they only enforce them on web applications.

That’s why even when you see a No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin … is therefore not allowed access message in your devtools console, you’ll still be able to go to the Network tab in devtools and view the response there.

That’s because the server has sent the response and the browser has received it, but the browser is just refusing to allow your frontend JavaScript code to access the response due to the fact the server sending the response hasn‘t opted into to cross-origin requests by sending the Access-Control-Allow-Origin response header.

The reason you can get the response just fine when you make the request from Python, etc., is that no client other than browsers will refuse to allow your code to access the response if it lacks the Access-Control-Allow-Origin response header. But browsers always will.

And note that in none of this is the server doing any blocking or refusing to respond to any requests. The server always continues to just receive requests and send responses. The only difference is in whether the server sends the Access-Control-Allow-Origin header in the response, or not.