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配置不起作用

回答

相關問題