时间戳

首页 > 解决方案 > 使用 HTTPS 从 chrome 从 S3 下载图像时出现 CORS 错误，但在 Firefox 中同样有效

google-chrome - 使用 HTTPS 从 chrome 从 S3 下载图像时出现 CORS 错误，但在 Firefox 中同样有效

问题描述

我正在尝试从具有以下设置的 S3 下载 .jpg 和 .pdf 图像

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

遵循类似于 - （如何使用 Angular2 下载文件）的方法，在 Firefox 中一切正常。在 chrome 中，PDF 下载工作完美，但是当我尝试下载图像时，总是收到 GET 请求的典型 CORS 错误。

 downloadFile(url, type, fileName) {
    this.http.getFile(url, { responseType: 'blob' }).
      subscribe(data => this.downloadFileComplete(data, type, fileName));
  }

  downloadFileComplete(data: any, type: string, fileName: string) {
    let fileType = (type === 'IMAGE') ? 'image/jpeg' : 'application/pdf';
    var blob = new Blob([data], { type: fileType.toString() });
    if (type === 'IMAGE') {
      saveAs(blob, fileName + ".jpg");
    }
    else {
      saveAs(blob, fileName + ".pdf");
    }
  }

在' https://xxxxxxxxxxxxxx.s3.ap-south-1.amazonaws.com/certifications/3c35754f-b3c4-42f2-953a-8af52b5ed19bf2bc5370-9481-492a-8174-dfcc63d5a9bd.jpg '从源http访问 XMLHttpRequest ： //localhost:4200 '已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

经过一些研究，我发现了这个解决方法（https://zyst.io/how-to-fix-aws-s3-chrome-and-safari-cors-on-images），他们建议对 S3 使用 HTTP URL . 当我尝试这个时，图像下载再次开始工作。有人可以向我解释

  1. 为什么获取图像的 GET 调用会在 Chrome 中引发图像而不是 PDF 的 CORS 错误？

  2. 这个问题有合适的解决方案吗？我的网站在 HTTPS 上运行，因此基于 HTTP 的解决方案并不好。

标签： google-chromeamazon-s3corsangular8imagedownload

解决方案

推荐阅读