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

Posted 2023-03-04

【中文标题】带有 html2canvas 的 aws s3 - 多个浏览器的 CORS 问题

【英文标题】：aws s3 with html2canvas - CORS issue with multiple browsers

【发布时间】：2018-12-21 08:42:30

【问题描述】：

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

我使用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

在使用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 设置或存储桶策略有问题吗？或者有没有关于缓存问题的可能性？我现在很困惑。

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

【问题讨论】：

什么是错误，当它不起作用时？

Access to Image at 'img_url' from origin 'my_url' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8001' is therefore not allowed access.。此消息取决于浏览器

还有html2canvas: Failed loading image #1。

这可能会有所帮助***.com/a/53137836/1815624

@CrandellWS 感谢您的回复，尽管我解决了问题并在下面分享了答案！

【参考方案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() + '/';

【讨论】：

你可以使用当前时间戳 document.getElementById('detail_img').src = src +new Date().getTime(); 我试图指出我在 html2canvas 上所做的这个 mod ...在 gist.github.com/CrandellWS/… 看到这个变化

还有把<MaxAgeSeconds>3000</MaxAgeSeconds>设置成0怎么样？

你帮了我很多！谢谢！