google-chrome - Canvas 上的 CORS 不适用于 Chrome 和 Safari

Question

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

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

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

Safari 错误:

Origin https://www.example.com is not allowed by Access-Control-Allow-Origin. http://mybucket.s3.amazonaws.com/bubble/foo.PNG

[Error] Failed to load resource: Origin https://www.example.com is not allowed by Access-Control-Allow-Origin. (foo.PNG, line 0)

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Chrome 错误:

Access to Image at 'https://mybucket.s3.amazonaws.com/bubble/foo.PNG' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

CORS 配置非常标准。我试过<AllowedOrigin>*</AllowedOrigin> ，以及其他一些变体，但没有任何区别......除了一个异常(exception):<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>

Canvas 脚本

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 header 。

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