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

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/*"
        }
    ]
}

当我用 curl 向我的图像发送请求时，它有安静的正常响应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

当这样做和使用 html2canvas 时allowTaint: false, useCORS: true，有时它运行良好，但有时在 chrome 中不起作用。此外，它在 IE 中有效，但在 Safari 中无效。我不知道有什么问题。

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

这是我的代码笔示例。( https://codepen.io/anon/pen/YjXbaZ )

无论是否crossorigin="anonymous"有效，它都有效，但有时有效，有时也无效。

我也试过httpand https，并将 url 从 更改s3.region_name/bucket_name/...为bucket_name.s3.region_name/...。

我的 CORS 设置或存储桶策略有问题吗？或者有没有关于缓存问题的可能性？我现在很困惑。

我将非常感谢任何评论和回答。提前致谢！

Answer 1

终于，我找到了答案。我为遇到同样问题的人分享我的解决方案。

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

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