使用cors从aws s3加载的Canvas元素与第一对加载不起作用

Question

所以我在我的AWS S3存储桶上设置了cors:

<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.

但是,当我重新加载页面几次时,它最终会工作并加载图像.完成后,我能够在canvas元素上成功调用toDataURL().

有谁知道为什么会这样？我弄错了吗？这是AWS的一个问题,我只需要等待亚马逊来修复这些问题吗？

它发生在我测试的所有浏览器中.在Chrome,Firefox,Safari,IE中.在我的Mac,PC和iPhone上.所以我不认为它与浏览器有关.此外,它发生在本地和生产中.

谢谢!

Answer 1

显然,浏览器不在请求标头中发送原始标头.并且aws需要发送原点.我不确定为什么会这样.即使使用简单的HTTP请求,也应该发送原始标头.唉,事实并非如此.

而这里就是起源头没有得到发的原因.