Question

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

我使用html2canvas来截图我的页面-来自amazon s3的图像（也是Cloudfront）

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

我将S3 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>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我的存储桶政策

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::ubkorea/*"
        }
    ]
}

当我向图像发送带有卷曲的请求时，它对Access-Control-Allow-Origin的响应正常。以下是我的回复。

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问题。因为我在Codepen示例中看到了类似的问题。有时它显示图像，但有时不显示。

这是我的Codepen范例。（https://codepen.io/anon/pen/YjXbaZ）

无论是否crossorigin="anonymous"，它都能很好地工作，但是有时它会起作用，有时两者都不起作用。

我还尝试了http和https，并将网址从s3.region_name/bucket_name/...更改为bucket_name.s3.region_name/...。

我的CORS设置或存储桶策略有问题吗？还是有可能出现缓存问题？我现在很困惑。

如有任何评论和答复，我将不胜感激。预先感谢！

Answer 1

最后，我找到了答案。我向遇到相同问题的人分享我的解决方案。

问题是来自s3的缓存-s3自动提供缓存，因此来自html2canvas的第二个请求不包括标头来源选项，它仅使用缓存的图像。

因此解决方案是避免缓存。我试图在s3中找到缓存配置，但找不到任何东西。因此，我使用了一些技巧-通过在s3网址后添加随机字符串来更改目标图片的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() + '/';

带有html2canvas的aws s3-多个浏览器出现CORS问题

1 个答案: