S3跨源資源共享不起作用

我試圖使用blur.js來模糊用戶上傳的圖像，並將圖像存儲在Amazon S3上。我給自己定了什麼，我認爲是正確的CORS配置，但圖像不能模糊，我得到這個錯誤在瀏覽器：S3跨源資源共享不起作用

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

這裏是我的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>POST</AllowedMethod> 
    <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
    </CORSConfiguration>

任何想法有什麼不對？

來源

2013-02-23 Alex Smith

發佈您的HTML/JS的消毒版本的任何機會使用圖像上「匿名」？ – 2013-02-24 14:58:59

我懷疑你沒有使用CORS支持所需的正確的S3端點地址格式。

即S3水桶支持這兩種格式：

http://bucket.s3.amazonaws.com/object
http://s3.amazonaws.com/bucket/object

但只有第一個URL將與CORS工作，根據documentation：

使用CORS，您可以將您的存儲桶配置爲顯式請啓用來自website.s3-website-us-east-1.amazonaws.com的跨域請求。

來源

2013-02-24 14:58:25

啊，我現在試試看看是否解決了這個問題。 – 2013-02-26 05:04:30

我剛剛做完了。基本上，您可以按照這些步驟來編輯您的S3存儲桶權限並使其工作。如果您需要更多幫助，請在下面留言。

1）登錄到AWS管理控制檯，打開在https://console.aws.amazon.com/s3/

2）在水桶名單亞馬遜S3控制檯中，打開您要查看，然後單擊「添加CORS配置」，其性質

桶

amazon-screen-shot

3）寫你願意標籤之間添加的規則<CORSConfiguration>

<CORSConfiguration> 
    <CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration>

您可以瞭解更多關於規則：http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

4）指定crossorigin =你會在你的畫布

來源

2013-11-12 21:22:42

亞馬遜S3似乎沒有迴應任何這些變化...... – Tyguy7 2014-06-19 22:24:51

' *'爲我做了這些 – awidgery 2015-06-12 16:11:15

S3跨源資源共享不起作用

回答

相關問題