Элемент холста с изображением, загруженным из aws s3 с использованием cors, не работает с загрузкой первой пары

Итак, у меня есть установка cors на моем ковше AWS S3:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

В моем html

<div id="explain_canvas"></div>

В моем javascript я загружаю изображение и помещаю его в изображение холста.

var outlineImage = new Image();
outlineImage.crossOrigin = '';
outlineImage.src = drawing_image;
outlineImage.onload = function() {
  var canvasDiv = document.getElementById('explain_canvas');
  var canvas = document.createElement('canvas');
  canvas.setAttribute('width', 722);
  canvas.setAttribute('height', 170);
  canvas.setAttribute('id', 'canvas_'+canvas_element);
  canvas.setAttribute('name', 'canvas_'+canvas_element);
  canvasDiv.appendChild(canvas);
  if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
  }
  var context = canvas.getContext("2d");
  context.drawImage(outlineImage, 10, 10, 600, 150);
}

Я загружаю контекст, подобный этому, чтобы быть совместимым с Internet Explorer.

Вот моя проблема. Когда страница загружается первые два раза, возникает такая ошибка:

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Однако, когда я повторно загружаю страницу пару раз, она в конечном итоге будет работать и загружать изображение. Как только это будет сделано, я могу успешно вызвать toDataURL() в элементе canvas.

Кто-нибудь знает, почему это происходит? Я сделал ошибку? Это проблема с AWS, и мне просто нужно подождать, пока Amazon исправит корс?

Это происходит во всех браузерах, которые я тестировал. В Chrome, Firefox, Safari, IE. На моем Mac, ПК и iPhone. Поэтому я не думаю, что это связано с браузером. Кроме того, это происходит локально и в производстве.

Спасибо!

Ответы

Ответ 1

По-видимому, браузеры не отправляют заголовок источника в заголовках запроса. И aws требует отправки источника. Я не знаю, почему это так. Заголовок происхождения должен отправляться даже с помощью простого HTTP-запроса. Увы, это не так.

И здесь - причина, по которой источник происхождения не отправляется.