我试图下载.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的解决方案并不好。
2条答案
按热度按时间sycxhyv71#
我尝试了几种解决方案,直到我能够为这个问题开发以下解决方案。
创建一个lambda函数,将s3镜像作为base64
我编写了这个lambda函数来获取S3对象并将其作为base64返回
字符串
获取base64镜像并转换为blob下载
型
zsohkypk2#
终于找到了真实的解决这个问题的办法。您可以通过Cloudfront提供图像,this tutorial解释了必要的配置。
在此之后,您可以将您的saveAs URL指向Cloudfront,瞧,您的图像将被下载而不会出现任何CORS问题。