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

Question

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

我使用 html2canvas 来截取我的页面 - 使用来自 amazon s3 的图像(也是云端)

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

我将我的 S3 CORS 设置为允许所有/还将我的存储桶设置为公开。此外，我将所有公共(public)访问权限授予所有人(只是为了测试它是否有效。我会在部署后阻止它们)

这是我的 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

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

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

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

无论 crossorigin="anonymous" 与否，它都能很好地工作，但有时它可以工作，有时也不能。

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

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

如果有任何评论和回答，我将不胜感激。提前致谢!

Answer 1

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

问题是来自 s3 的缓存 - s3 自动提供缓存，所以来自 html2canvas 的第二个请求不包括 header 来源选项，它只使用缓存的图像。

所以解决方案是避免缓存。我试图在 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() + '/';