带有html2canvas的AWS S3-多个浏览器出现CORS问题 [英] aws s3 with html2canvas - CORS issue with multiple browsers

问题描述

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

I knew many questions and issues have been already made. But I can't find out clear answer to solve this issue.

我使用 html2canvas 来截图我的页面-包含来自 amazon s3 的图像(也是Cloudfront)

I use html2canvas to screenshot my page - with image from amazon s3 (cloudfront, too)

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

I tried almost every answer from SO and html2canvas issues.

我将我的S3 CORS设置为允许所有操作，也将我的存储桶设为公开.另外，我还向所有人提供了所有人的公共访问权限(只是测试它是否有效.部署后我将阻止它们)

I setup my S3 CORS to allow all / also set my bucket to public. Also I gave all public access to Everyone (Just to test if it works. I will block them after deploy)

这是我的s3的CORS

Here's my CORS for s3

<?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 响应正常.以下是我的回复.

When I send request with curl to my images, it has quiet normal response with Access-Control-Allow-Origin. Below is my response.

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中不可用.我不知道出什么问题.

When doing this and html2canvas with allowTaint: false, useCORS: true, sometimes it worked well but sometimes not in chrome. Also, it worked in IE but not worked in Safari. I don't know what's problem.

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

I guess it's kind of CORS problem. Because I saw similar problem in my codepen example. Sometimes it show the image, but sometimes not.

这是我的Codepen范例.( https://codepen.io/anon/pen/YjXbaZ )

here is my codepen exmaple. (https://codepen.io/anon/pen/YjXbaZ)

无论是否 crossorigin ="anonymous" ，效果都很好，但有时效果不错，有时效果也不佳.

It works well whether crossorigin="anonymous" or not, but sometimes it works, sometimes not either.

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

I also tried http and https, and change url from s3.region_name/bucket_name/... to bucket_name.s3.region_name/....

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

Is the any problem in my CORS setting or bucket policy? Or is there any possibility about cache issue? I'm very confusing now.

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

I'll be very appreciate with any comment and answer. Thanks in advance!

推荐答案

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

Finally, I found the answer. I share my solution for people who suffered with same problem.

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

The problem is the cache from s3 - s3 automatically serve cache so second request from the html2canvas not include header origin options, it just use the cached image.

因此解决方案是避免缓存.我试图在s3中找到缓存配置，但找不到任何东西.因此，我使用了一些技巧-通过在s3网址后添加随机字符串来更改目标图片的src:例如"s3.xxx.xxx/media/my_img.png?_random".

So the solution is avoid cache. I tried to find cache configurations in s3, but I couldn't find something. So I use some trick - change target image's src by add random string after s3 url : like this `s3.xxx.xxx/media/my_img.png?_random'.

在那之后，它与更改的图像URL一起很好地工作.

After that, it works well with changed image 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问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！