Javascript 在S3和CloudFront中使用CORS的HTML2Canvas

我有个问题，我完全绝望了…：(

我正在使用HTML2Canvas创建包含许多内容的div的屏幕截图

我读过很多类似的问题，我还发现了另一个与我的问题非常相似的问题：

在Firefox中，一切正常，但在Chrome中，我的CORS有问题。我有以下错误：

跨源资源共享策略已阻止加载来自源“”的映像：请求的资源上不存在“访问控制允许源”标头。因此，不允许源“”访问

我在S3存储桶中以这种方式配置了CORS：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>localhost</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>localhost:58943</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>files.domain.ly</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

为什么它可以在Firefox上运行，而不能在Chrome或Safari上运行

S3中的文件是公共的，我可以通过任何web浏览器直接访问，没有任何问题

我尝试过在img标记中使用属性crossorigin=“anonymous”，但它不起作用

非常感谢你

---

编辑：有时正常，有时没有……缓存问题？

运气好吗？我在一些文件中遇到了一个非常类似的问题……是的@KshitizShankar向图像的url添加一个随机字符串解决了我的问题……这是缓存问题……你用其他方法解决了吗？谢谢！！不，我使用的是查询字符串方法ait’解决这个问题很好……希望将来会有更好的办法。。。

html2canvas(document.getElementById('zoom_container'), {
  useCORS: true
}).then(function (canvas) {
  canvas.id = "image_canvas_render";
  document.body.appendChild(canvas);
  var img = canvas.toDataURL();
  img.id = "image_render_canvas";
});