AWS S3上的CORS配置不起作用

我有使用html5 canvas进行t恤设计的rails 4应用程序。 Fabricjs被用作Javascript HTML5画布库。当我在画布上添加文本对象并调用toDataURL方法时，它工作正常。当我加入SVG图像担任过AWS S3在画布上，它被装在画布上，但是当我呼吁帆布toDataURL，它变得空白，我收到以下错误控制台上：AWS S3上的CORS配置不起作用

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

最初的图像时，担任过S3我得到以下错误：

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure image 'http://example.s3.amazonaws.com/clip_arts/arts/000/000/001/thumb/1.png?1431770898'. This content should also be served over HTTPS.

我通过互联网搜索，发现它是一个CORS问题。在我的AWS斗，我加了以下CORS配置：

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>https://example.com/</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Content-*</AllowedHeader> 
     <AllowedHeader>Host</AllowedHeader> 
    </CORSRule> 
    <CORSRule> 
     <AllowedOrigin>https://*.example.com/</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Content-*</AllowedHeader> 
     <AllowedHeader>Host</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration>

电话toDataURL工作正常，在Firefox，但并不适用于任何其他浏览器。

来源

2015-05-19 ingnam

您可能需要添加crossOrigin:'Anonymous'的功能，

fabric.loadSVGFromURL(svgUrl,function(objects,options) { 

}, { 
    crossOrigin: 'Anonymous' 
});

，而不是具有这样的CORS

<AllowedHeader>Content-*</AllowedHeader> 
<AllowedHeader>Host</AllowedHeader>

只需添加这到CORS

<AllowedHeader>*</AllowedHeader>

来源

2015-05-19 07:12:32

我正在使用'fabric.Image.fromURL'在画布上添加图像，并且当我在该函数中添加crossOrigin：“anonymous”时，出现错误'Image from origin blocked。请求的资源上没有'Access-Control-Allow-Origin'标头。我也使用了'fabric.loadSVGFromURL'，并且出现错误'混合内容：'https：//'页面通过HTTPS加载，但请求了不安全的XMLHttpRequest端点。在这两种情况下，图像都没有在画布中加载。 – ingnam

在除了Khawer Zeshan回答..

我在Chrome上使用toDataURL时遇到了同样的问题。除了<AllowedOrigin>*</AllowedOrigin>之外，我还添加了<AllowedOrigin>Anonymous</AllowedOrigin>到AWS S3 CORS配置。它为我工作。

来源

2015-07-22 22:24:16 novasaint

AWS S3上的CORS配置不起作用

回答

相关问题