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

Question

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

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

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

Safari 错误：

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

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

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

Chrome 错误：

通过“https://mybucket.s3.amazonaws.com/bubble/foo.PNG”访问图像 来自原点“null”已被 CORS 策略阻止：否 '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