Question

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

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

Firefox上的一切正常 - 但Chrome和Safari上没有加载图片。

错误Safari：

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

[错误]无法加载资源：原点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”标头资源。因此，不允许原点'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上使用带有Access-Control错误的S3托管）。

它最终成为Chrome和Safari特有的缓存问题。如果您通过CSS或<img>标记加载图片，则图片将在没有Access-Control-Allow-Origin标题的情况下进行缓存。

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

画布上的CORS无法在Chrome和Safari

1 个答案: