Question

这是我正在关注的代码。

 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。

Answer 1

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

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

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

使用XmlHttpRequest下载图像时，我收到此错误

1 个答案: