在S3和CloudFront中使用CORS的HTML2Canvas

Question

我有一个问题,我完全绝望...... :(

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

我已经阅读了许多类似的问题:问题1和问题2,我发现另一个问题与我的问题非常相似:

缓存图像的CORS策略

在Firefox中,一切正常,但在Chrome中,我遇到了CORS问题.我有这个错误:

来自" http://files.domain.ly "的图像已被跨源资源共享策略阻止加载:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:58943 '访问.

我在S3 Bucket中以这种方式配置了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>

该files.domain.ly是CloudFront的的CNAME.

HTML2Canvas代码:

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";
});

为什么它适用于Firefox但不适用于Chrome或Safari？

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

我试过在img标签中使用属性crossorigin ="anonymous",但它没有用.

非常感谢!!

编辑:有时它工作,有时没有...缓存问题？