使用 XmlHttpRequest 下载图像时，出现此错误答案

【问题标题】：When downloading image using XmlHttpRequest, I getting this error使用 XmlHttpRequest 下载图像时，出现此错误
【发布时间】：2017-06-06 20:35:01
【问题描述】：

这是我正在关注的代码。

 storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
      // `url` is the download URL for 'images/stars.jpg'

  // This can be downloaded directly:
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.setRequestHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  xhr.setRequestHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
  xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type');
  xhr.send();

  // Or inserted into an <img> element:
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

但我无法下载图片文件，因为它说：

请求中没有“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:8000” 访问。

但是，我成功地在我的img 标记中显示了图像。要是我也能下载就好了。

我使用 localhost 来运行它。

更新：这是新的错误：

请求头域 Access-Control-Allow-Origin 不允许预检响应中的 Access-Control-Allow-Headers。

【问题讨论】：

请不要在图片中包含代码...
问题是 CORS 问题 - 显然 URL 与页面本身的来源不同 - 无论图像来自什么服务器，显然都不允许这样的请求 - 所以......什么服务器服务于图片？不是http://localhost:8000是吗
您根本没有显示有关托管图像的服务器的任何信息，因此，我无法提出任何建议...搜索 enable cors 应该会给您有关如何在许多情况下启用 cors 的信息
我相信谷歌（或任何你想要的搜索引擎）会帮助你
为什么要对已有的图像发出 http 请求？使用链接：stackoverflow.com/questions/19327749/…

标签： javascript download xmlhttprequest

【解决方案1】：

您必须在服务器中添加标头：

header('Access-Control-Allow-Origin', '*');
header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers', 'Content-Type');

例如，这将允许指定方法和标头的所有域。

【讨论】：

这不是提示，而是解决方案...如果您无权访问服务器，则必须请求管理员添加您的域才能从您的域访问其资源。
现在是由允许的标头引起的相同错误，在我的响应中仅允许内容类型标头