Javascript 使用cors从aws s3加载的画布元素和图像在前两次加载时不起作用

因此，我在AWS S3桶上设置了cors：

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

我正在加载这样的上下文以与internet explorer兼容

这是我的问题。当页面加载前两次时，会出现以下错误：

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

但是，当我重新加载页面几次时，它最终会工作并加载图像。一旦完成，我就能够成功地调用canvas元素上的toDataURL（）

有人知道为什么会这样吗？我犯了错误吗？这是AWS的问题吗？我只能等待亚马逊修复cors

---

我测试过的所有浏览器都会出现这种情况。在Chrome、Firefox、Safari中，即在我的Mac、PC和iPhone上。所以我认为这与浏览器无关。此外，它发生在本地和生产中

---

谢谢

很明显，浏览器没有在请求头中发送原始头。aws要求发送原始数据。我不知道为什么会这样。即使使用简单的HTTP请求，也应该发送原始标头。唉，事实并非如此

---

并且是原始标头未被发送的原因。

能否包括在哪些浏览器中看到此错误？您提到您“与internet explorer兼容”，但没有提到错误是否发生在IE或其他浏览器中。我测试过的所有浏览器都会出现这种情况。在Chrome、Firefox、Safari中，即在我的Mac、PC和iPhone上。所以我认为这与浏览器无关。而且，这种情况在本地和生产中都会发生。这也是为什么始发负责人没有被发送的原因。这太奇怪了。我可以得到一个图像加载时，原点不存在。如果存在，则Safari（仅Safari）不会加载映像，因为“跨源资源共享策略拒绝跨源映像加载”

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);
}

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