使用cors从aws s3加载的Canvas元素和图像在前几次加载时不工作

Canvas element with and Image loaded from aws s3 using cors does not work first couple loads

本文关键字：加载 几次 工作 图像 aws cors s3 元素 Canvas 使用      更新时间：2023-09-26

所以我在我的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上。所以我认为这与浏览器无关。此外，它在本地和生产中也会发生。

谢谢!

显然浏览器没有在请求头中发送origin头。法律要求发送原产地。我不确定为什么会这样。即使是一个简单的HTTP请求，也应该发送origin报头。唉，它不是。

相关文章：