从 S3 下载图像时出现 Cors 错误答案

【问题标题】：Cors error while downloading image from S3从 S3 下载图像时出现 Cors 错误
【发布时间】：2018-05-17 08:05:41
【问题描述】：

我正在将 div 转换为可下载的图像。

function generateBanner() {
    domtoimage.toBlob(document.getElementById('wrapper'))
    .then(function(blob) {
      console.log("blob", blob)
      window.saveAs(blob, 'my-node.png');
    });
}

此代码运行良好。我的问题是当这个 div 有一个托管在 S3 存储桶中的图像时

例如：

<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 错误，我不知道为什么。

在我的 s3 配置中，我有这个：

<CORSConfiguration>
   <CORSRule>
 <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <MaxAgeSeconds>3000</MaxAgeSeconds>
   <AllowedHeader>*</AllowedHeader>
   </CORSRule>
   </CORSConfiguration>

仍然是同样的错误。任何想法？我在 s3 中尝试了几种不同的配置，也尝试了几种使用 javascript 的方法，但都没有奏效。

【问题讨论】：

标签： javascript amazon-s3

【解决方案1】：

你错过了<AllowedMethod>HEAD</AllowedMethod>

然后您应该会看到以下标题：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, POST
Access-Control-Max-Age: 3000

请记住，您可能需要一段时间才能看到正确的标题。

【讨论】：

@MarcosCasagrande 你能帮我理解你是如何确定这是问题的吗？我不明白问题中的什么让您怀疑正在发出 HEAD 请求。
@Michael-sqlbot 老实说，经验。过去我在使用 S3 和 CORS 时遇到过同样的问题。当我遇到这些问题时，我尝试了所有有效的方法，没有HEAD，它就不起作用。我找不到任何关于这方面的文档，所以我所拥有的只是我使用 S3 的经验。
有趣。当您从 HTML 和 XHR 访问同一个对象时，S3 中有一个 bug 会阻止 CORS 正常工作，我希望它在这里也不会适用。看起来不是。 +1 并感谢您的回复。
不客气。而且我不知道那个错误，顺便说一句，这是一本很棒的书。