CORS错误,而从S3下载图像与HTTPS从 chrome ,但同样的工作在Firefox中

hgb9j2n6  于 2023-08-01  发布在  Go
关注(0)|答案(2)|浏览(133)

我试图下载.jpg & .pdf图像从S3有以下设置

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

字符串
遵循类似于-(How do I download a file with 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");
    }
  }


CORS策略已阻止从源“http://localhost:4200”访问“https://xxxxxxxxxxxxxx.s3.ap-south-1.amazonaws.com/certifications/3c35754f-b3c4-42f2-953a-8af52b5ed19bf2bc5370-9481-492a-8174-dfcc63d5a9bd.jpg”处的XMLHttpRequest:请求的资源上不存在“Access-Control-Allow-Origin”标头。
经过一些研究,我发现了这个解决方案(https://zyst.io/how-to-fix-aws-s3-chrome-and-safari-cors-on-images),他们建议对S3使用HTTP URL。当我尝试这个时,图像下载又开始工作了。谁能给我解释一下
1.为什么GET调用获取图像会引发图像的CORS错误,而不是Chrome中的PDF?
1.这个问题有没有适当的解决办法?我的网站运行在HTTPS上,因此基于HTTP的解决方案并不好。

sycxhyv7

sycxhyv71#

我尝试了几种解决方案,直到我能够为这个问题开发以下解决方案。

创建一个lambda函数,将s3镜像作为base64

我编写了这个lambda函数来获取S3对象并将其作为base64返回

const AWS = require("aws-sdk");
const s3 = new AWS.S3();

const imageConversor = async (event, context, callback) => {
  const { imageUrl } = event.queryStringParameters;
  const params = { Bucket: "your-bucket-name", Key: imageUrl };
  const response = await s3.getObject(params).promise();
  const fileContent = response.Body.toString("base64");
  callback(null, {
    statusCode: 200,
    body: JSON.stringify({
      image: fileContent,
    }),
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  });
};

字符串

获取base64镜像并转换为blob下载

// this base64toBlob function was written by Jeremy at https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript

const base64toBlob = function (b64Data, contentType, sliceSize) {
  contentType = contentType || "";
  sliceSize = sliceSize || 512;
  var byteCharacters = window.atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }
  var blob = new Blob(byteArrays, { type: contentType });
  return blob;
};

const onDownloadClick = async (url) => {
  const data = await axios.get("/imageConversor?imageUrl=" + url.replace("https://your-bucket-name.s3.amazonaws.com/", ""));
  const blobImage = base64toBlob(url);
  saveAs(blobImage || url, `fileName.png`);
}

zsohkypk

zsohkypk2#

终于找到了真实的解决这个问题的办法。您可以通过Cloudfront提供图像,this tutorial解释了必要的配置。
在此之后,您可以将您的saveAs URL指向Cloudfront,瞧,您的图像将被下载而不会出现任何CORS问题。

相关问题