Ошибка Cors при загрузке изображения с S3

Question

Я конвертирую div в загружаемое изображение.

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

Этот код работает нормально.Моя проблема в том, что когда этот div имеет изображение, которое размещено в 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, и я понятия не имею,почему.

В моей конфигурации s3 у меня это:

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

и все та же ошибка.Любая идея ?Я пробовал несколько разных конфигов в s3 и несколько подходов с javascript, но ни один из них не работал.

Answer 1

Вам не хватает <AllowedMethod>HEAD</AllowedMethod>

Тогда вы должны увидеть следующие заголовки:

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

Имейте в виду, что может пройти некоторое время, прежде чем вы увидите правильные заголовки.