将 div 中的 amazon s3 图像转换为画布时出现跨源问题

Posted 2023-03-04

【中文标题】将 div 中的 amazon s3 图像转换为画布时出现跨源问题

【英文标题】：Cross origin issue occuring while converting amazon s3 images in div to canvas

【发布时间】：2017-11-01 02:37:22

【问题描述】：

我正在使用htm2canvas 将带有图像的特定 div 转换为画布。当图像是本地图像时，这是有效的。我遇到了这个问题

“从源 'http://mywebsite.com' 访问位于 'https://mybucket.s3.amazonaws.com/B008C4GFP0.jpg' 的图像已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。源 'http://mywebsite.com ' 因此不允许访问。”

当图像来自亚马逊时。

我正在转换到画布上的 Div

<div> <img id="img1" src="https://mybucket.s3.amazonaws.com/B008C4GFP0.jpg" style="width:100%; height:100%;position:relative;"> <img id="img2" src="https://mybucket.s3.amazonaws.com/B00HXT858A.jpg" style="width:100%; height:100%;position:relative;"> </div>

My html to canvas code is

 ` 

    html2canvas(element, 
            useCORS: true,
            allowTaint:true,
              onrendered: function (canvas) 
                getCanvas = canvas;
                var content = $("#TempPublishedItems").html();
                var image = getCanvas.toDataURL("image/jpg");
                var image1 = document.createElement("IMG");
                image1.src = getCanvas.toDataURL("image/jpg");
              ,
              proxy: 'https://html2canvas.appspot.com/query',
              logging: true
            );

`

为了解决这个跨源问题，我在 amazon 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>
    <AllowedMethod>PUT</AllowedMethod> 
    <AllowedMethod>POST</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
<CORSRule> 
<AllowedOrigin>https://mywebsite.com</AllowedOrigin> 
<AllowedMethod>HEAD</AllowedMethod> 
</CORSRule> 
</CORSConfiguration>
`

请帮助我解决亚马逊 s3 图像的跨源问题。

【参考方案1】：

不要使用 allowTaint 或 useCORS 选项。

在此处查看使用和测试下的自述文件：

https://github.com/zeusstl/html2canvas-proxy-nodejs

【参考方案2】：

我在 Amazon S3 上遇到了同样的问题。我将 Amazon S3 中的 AllowedHeader CORS 配置从 <AllowedHeader>Authorization</AllowedHeader> 更改为 <AllowedHeader>*</AllowedHeader>，这对我有用，如下所示。我在这个 jsfiddle 中尝试过：http://jsfiddle.net/6FZkk/1066/

希望它对你有用。