所以我在我的 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 中,我正在加载图像并将其放入 Canvas 图像中。
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 的问题吗?我只能等待 Amazon 修复这些问题?
我测试过的所有浏览器都会出现这种情况。在 Chrome、Firefox、Safari、IE 中。在我的 Mac、PC 和 iPhone 上。所以我认为这与浏览器无关。此外,它发生在本地和生产中。
谢谢!
最佳答案
显然浏览器没有在请求 header 中发送原始 header 。 aws 要求发送原点。我不确定为什么会这样。即使是简单的 HTTP 请求,也应该发送原始 header 。唉,事实并非如此。
和here是原始头没有被发送的原因。
关于javascript - 使用 cors 从 aws s3 加载的 Canvas 元素和图像在第一次加载时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14176470/