从S3下载图像时出现Cors错误 [英] Cors error while downloading image from S3
问题描述
我正在将div转换为可下载的图像。
I am converting a div into an downloadable image.
function generateBanner() {
domtoimage.toBlob(document.getElementById('wrapper'))
.then(function(blob) {
console.log("blob", blob)
window.saveAs(blob, 'my-node.png');
});
}
此代码正常。
我的问题是这个div有一个托管在S3 Bucket中的图像
This code works fine. My problem is when this div has an image that is hosted in a S3 Bucket
例如:
<article id="wrapper">
<p>{{ title }}</p>
<img class="logo" src="{{ logo }}" alt="">
<aside class="exclusive" ng-if="exclusive"></aside>
<aside class="off" ng-if="percentoff">{{ percentoff }}
</aside>
<div class="produtos">
<img src="https://s3-sa-east-1.amazonaws.com/teste-img-roge/Thumbs/0026954_30510_1_415.jpeg" alt="">
</div>
<aside class="valid" ng-if="valid"></aside>
</article>
之后,当我点击时我收到了CORS错误,我不明白为什么。
after that, when I click I got CORS errors, and I have no idea why.
在我的s3配置中我有这个:
In my s3 Configuration I have this:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
仍然是同样的错误。任何的想法 ?我在s3中尝试了几个不同的配置,并且几乎没有使用javascript的方法,但它们都没有用。
and still the same error. Any idea ? I tried few different configs in s3, and few approachs with javascript, but none of them worked.
推荐答案
你错过了< AllowedMethod> HEAD< / AllowedMethod>
然后你会看到以下标题:
Then you should see the following headers:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, POST
Access-Control-Max-Age: 3000
请记住,您可能需要一段时间才能看到正确的标题。
Have in mind, that it could take a while before you see the correct headers.
这篇关于从S3下载图像时出现Cors错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!