S3 पार ओरिजिन रिसोर्स शेयरिंग काम नहीं कर

Question

मैं blur.js उपयोग करने के लिए उपयोगकर्ता अपलोड किए गए चित्रों को धुंधला करने के कोशिश कर रहा हूँ, और मैं अमेज़न S3 पर छवियों भंडारण कर रहा हूँ। मैं सेट कर लेते हैं कि मैं क्या सही CORS विन्यास होने के लिए लगता है, लेकिन छवियों को धुंधला नहीं किया जा सकता और मैं ब्राउज़र में इस त्रुटि मिलती है:

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> 

कोई विचार क्या गलत है?

Answer 1

मैं एक संदेह है कि आप सही S3 endpoint पते के प्रारूप कि CORS समर्थन के लिए आवश्यक है उपयोग नहीं कर रहे है।

यानी S3 बाल्टी इन दोनों ही प्रारूपों का समर्थन:

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

लेकिन केवल पहले यूआरएल CORS के साथ काम करेंगे documentation के अनुसार:

सीओआरएस के साथ, आप अपनी बाल्टी को स्पष्ट रूप से कॉन्फ़िगर कर सकते हैं ly वेबसाइट.s3-website-us-east-1.amazonaws.com से क्रॉस-मूल अनुरोध सक्षम करें।

Answer 2

मैं सिर्फ यह किया है। असल में, आप अपने एस 3 बाल्टी अनुमतियों को संपादित करने और आईआर काम करने के लिए चरणों का पालन कर सकते हैं। अगर आपको किसी और मदद की ज़रूरत है, तो टिप्पणी छोड़ दें।

1) बाल्टी जिसका गुण आप देख सकते हैं और "CORS विन्यास जोड़ें" क्लिक करना चाहते हैं

खोलने एडब्ल्यूएस प्रबंधन कंसोल में प्रवेश करें और https://console.aws.amazon.com/s3/

2) बाल्टी सूची में से अमेज़न S3 कंसोल खोलें,

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 निर्दिष्ट = छवि आप अपने कैनवास