Javascript 带有html2canvas的aws s3-多浏览器的CORS问题

我知道已经提出了许多问题。但我找不到解决这个问题的明确答案

我使用

html2canvas

截屏我的页面，图片来自

AmazonS3

（也包括cloudfront）

我尝试了SO和html2canvas问题的几乎所有答案

我将S3 CORS设置为允许所有/也将我的bucket设置为public。我还向每个人提供了所有公共访问权限（只是为了测试它是否有效。我将在部署后阻止它们）

这是我s3的COR

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

当我向我的图像发送带有curl的请求时，它会以

访问控制允许原点的方式进行安静的正常响应。以下是我的回答

HTTP/1.1 200 OK
x-amz-id-2: 2v8iSfy/9yvLRe+CFiUqEjUz96IcRC86t1m7IBy1NDakkYIriumosvVYECeYgcPAcCW1axpwF00=
x-amz-request-id: 4ADD8456071CE5C3
Date: Fri, 13 Jul 2018 02:55:10 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Sat, 07 Jul 2018 07:54:35 GMT
ETag: "2374a71498a1066a412565cbb3b03e86"
Accept-Ranges: bytes
Content-Type: image/jpeg
Content-Length: 52134
Server: AmazonS3

当使用
allowTaint:false，useCORS:true
执行此操作和html2canvas时，有时效果很好，但有时在chrome中效果不佳。此外，它在IE中起作用，但在Safari中不起作用。我不知道有什么问题

我想这是CORS的问题。因为我在我的代码笔示例中看到了类似的问题。有时它显示图像，但有时不显示

这是我的密码笔。（）

无论
crossorigin=“anonymous”
与否，它都能很好地工作，但有时也能工作，有时也不行

我还尝试了
http
和
https
，并将url从
s3.region\u name/bucket\u name/…
更改为
bucket\u name.s3.region\u name/…

我的CORS设置或桶策略有问题吗？或者是否存在缓存问题的可能性？我现在很困惑

如果您有任何意见和回答，我将不胜感激。提前谢谢
 最后，我找到了答案。我为那些有同样问题的人分享我的解决方案

问题是s3-s3中的缓存会自动为缓存服务，因此来自
html2canvas
的第二个请求不包括头源选项，它只使用缓存的图像

因此，解决方案是避免缓存。我试图在s3中找到缓存配置，但找不到什么。因此，我使用了一些技巧-通过在S3URL之后添加随机字符串来更改目标图像的src：比如's3.xxx.xxx/media/my_img.png？_random'

之后，它可以很好地处理更改后的图像url

下面是我的代码示例

// function for make random string
function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

// and add random string to src
// also add slash at the end of the url for safari
var src = $("#detail_img").attr('src');
document.getElementById('detail_img').src = src + '?' + makeid() + '/';

//生成随机字符串的函数
函数makeid（）{
var text=“”；
var-mablue=“ABCDEFGHIJKLMNOPQRSTUVXYZABCDFGHIJKLMNOPQRSTUVXYZ0123456789”；
对于（变量i=0；i<5；i++）
text+=可能的.charAt（Math.floor（Math.random（）*可能的.length））；
返回文本；
}
//并将随机字符串添加到src
//还可以在safari的url末尾添加斜杠
var src=$（“#detail_img”）.attr（'src'）；
document.getElementById（'detail_img'）。src=src++？'+makeid（）++'/'；
当它不起作用时，错误是什么？
从源站“我的url”访问“img\u url”处的图像已被CORS策略阻止：请求的资源上不存在“访问控制允许源站”标题。起源'http://localhost:8001因此，不允许访问。
。此消息取决于browseralso
html2canvas:Failed loading image#1
。这可能会对@CrandellWS有所帮助。感谢您的回复，尽管我已经解决了问题，并在下面分享了答案！您可以使用当前时间戳
document.getElementById（'detail_img'）。src=src+new Date（）.getTime（）我试图指出我在html2canvas上做的这个mod。。。看到了吗？把设置
3000
改成0怎么样？你帮了我很多忙！非常感谢。
// function for make random string
function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

// and add random string to src
// also add slash at the end of the url for safari
var src = $("#detail_img").attr('src');
document.getElementById('detail_img').src = src + '?' + makeid() + '/';