时间戳

首页 > 解决方案 > 带有 html2canvas 的 aws s3 - 多个浏览器的 CORS 问题

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

问题描述

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

我html2canvas用来截图我的页面 - 来自amazon s3（云端）的图像

我尝试了几乎所有来自 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 设置或存储桶策略有问题吗？或者有没有关于缓存问题的可能性？我现在很困惑。

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

标签： javascriptamazon-s3corshtml2canvas

解决方案

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

问题是来自 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() + '/';

推荐阅读