画布上的 CORS 不适用于 Chrome 和 Safari

Question

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

CORS 是在 AWS 上设置的，并且在脚本中CrossOrigin设置了该属性anonymous。

在 Firefox 上一切正常——但在 Chrome 和 Safari 上无法加载图像。

错误Safari：

Access-Control-Allow-Origin 不允许Origin https://www.example.com。 http://mybucket.s3.amazonaws.com/bubble/foo.PNG

[错误] 无法加载资源：Access-Control-Allow-Origin 不允许Origin https://www.example.com。（foo.PNG，第 0 行）

跨源资源共享策略拒绝跨源图像加载。

错误铬：

CORS 策略已阻止从源“null”访问“ https://mybucket.s3.amazonaws.com/bubble/foo.PNG ”上的图像：没有“Access-Control-Allow-Origin”标头存在于请求的资源。因此，不允许访问 Origin 'null'。

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标题。

您可以通过禁用缓存并检查错误是否仍然存在来检查是否属于这种情况。如果是这个问题，这个答案可能会有所帮助：Refresh image with a new one at the same url