CORS 获取 .js 内容 - Javascript

Question

我正在尝试从在浏览器上运行的代码（通过插件）获取各种 .js 文件的内容。

使用XMLHttpRequest 获取驻留在同一服务器上的 .js 文件没有问题，但是当我需要获取其他域上的 .js 文件的内容时，我正在尝试使用 CORS 但我不能似乎无法正常工作

这是我的代码

// 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();
}

当我跑步时：

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

我收到“发出请求时出错。”错误警报和控制台日志

XMLHttpRequest 无法加载 https://......./javascript.js。不 请求中存在“Access-Control-Allow-Origin”标头 资源。 Origin 'https://.....com' 因此不允许访问。

Answer 1

只有当您发出请求的服务器明确表明他们选择接收跨域请求时，您的浏览器才会让您的前端 JavaScript 代码访问来自跨域请求的响应，他们通过发送 @ 987654324@ 响应头在他们的响应中。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 有更多详细信息。

如果站点从不发送 Access-Control-Allow-Origin 响应标头，那么您能够获取该站点跨域内容的唯一方法是使用 CORS 代理。有关详细信息，请参阅"No 'Access-Control-Allow-Origin' header is present on the requested resource" 的答案。

浏览器是唯一对跨域请求实施限制的客户端，而且它们只对 Web 应用程序实施限制。

这就是为什么即使您看到 请求的资源上不存在“Access-Control-Allow-Origin”标头的原因。因此，在您的 devtools 控制台中，Origin ... is not allowed access 消息，您仍然可以转到 devtools 中的“网络”选项卡并在那里查看响应。

那是因为服务器已经发送了响应并且浏览器已经接收到它，但是浏览器只是拒绝让你的前端 JavaScript 代码访问响应，因为发送响应的服务器没有选择跨- 通过发送Access-Control-Allow-Origin 响应头来发起请求。

当您从 Python 等发出请求时，您可以很好地获得响应的原因是，如果缺少 Access-Control-Allow-Origin 响应标头，除了浏览器之外的任何客户端都不会拒绝允许您的代码访问响应。但浏览器总是会的。

请注意，在这一切中，服务器都不会阻止或拒绝响应任何请求。服务器总是继续只接收请求并发送响应。唯一的区别在于服务器是否在响应中发送Access-Control-Allow-Origin 标头。