javascript - 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 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

当您发出请求的服务器明确表明他们选择接收跨域请求时，您的浏览器只会让您的前端 JavaScript 代码访问来自跨域请求的响应，他们通过发送 Access-Control-Allow-Origin 响应中的响应 header 。

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

在站点从不发送 Access-Control-Allow-Origin 响应 header 的情况下，您能够获取站点跨源内容的唯一方法是使用 CORS 代理。在 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 查看答案了解详情。

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

这就是为什么即使您看到 请求的资源上没有“Access-Control-Allow-Origin” header 。 Origin … 因此不允许在您的开发工具控制台中访问消息，您仍然可以转到开发工具中的“网络”选项卡并查看那里的响应。

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

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

请注意，在这一切中，服务器都没有阻止或拒绝响应任何请求。服务器始终继续接收请求并发送响应。唯一的区别在于服务器是否在响应中发送 Access-Control-Allow-Origin header 。