Итак, у меня есть настройки cors на моем AWS S3 bucket:

  
    *
    GET
  

В моем HTML

В моем 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. Так что я неНе думаю, что это связано с браузером. Также это происходит локально и в производстве.

Спасибо!