画布上的 CORS 在 Chrome 和 Safari 上不起作用

Question

我正在尝试在画布上显示图像。这些映像托管在 S3 上。

CORS 在 AWS 上设置，CrossOrigin属性在脚本中设置为anonymous。

在Firefox上一切正常- 但图像没有加载到Chrome和Safari上。

错误浏览器：

原产地 https://www.example.com 不允许 访问控制允许源。 http://mybucket.s3.amazonaws.com/bubble/foo.PNG

[错误] 加载资源失败：源 https://www.example.com 不是 由访问控制允许源允许。(foo.PNG，第 0 行)

跨域资源共享拒绝跨源镜像加载 政策。

错误铬：

在"https://mybucket.s3.amazonaws.com/bubble/foo.PNG"访问图像 来自源"空"已被 CORS 策略阻止：否 "访问控制允许源"标头存在于请求的上 资源。因此，不允许访问源"空"。

CORS 配置非常标准。我尝试了<AllowedOrigin>*</AllowedOrigin>，以及其他一些变体，但它没有任何区别......只有一个例外：<AllowedOrigin>null</AllowedOrigin>似乎适用于Chrome。

AWS 上的 CORS 配置

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://www.example.com</AllowedOrigin>
<AllowedOrigin>http://www.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>

画布脚本

let myImage = new Image();
myImage.setAttribute('crossOrigin', 'anonymous');
myImage.src = thisDocument.url;
myImage.onload = function() {
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
canvas.setAttribute('width', 200);
canvas.setAttribute('height', 200);
context.fillStyle = hsl(0, 50%, 50%);
context.fillRect(0, 0, 120, 120);
context.drawImage(myImage, 12, 12, 60, 60);
};

Answer 1

我遇到了与此非常相似的问题(在 Safari 和 Chrome 上使用带有访问控制错误的 S3 托管)。

它最终成为特定于Chrome和Safari的缓存问题。如果您通过 CSS 或<img>标记加载图像，则缓存的图像将不包含Access-Control-Allow-Origin标头。

您可以通过禁用缓存并检查错误是否仍然存在来检查是否属于这种情况。如果这是问题所在，此答案可能会有所帮助：在同一网址上用新图像刷新图像