S3 - प्रवेश-नियंत्रण-अनुमति-उत्पत्ति हैडर

187

क्या किसी Access-Control-Allow-Originने प्रतिक्रिया हेडर को जोड़ने का प्रबंधन किया ? मुझे कुछ इस तरह की आवश्यकता है:

<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />

इस अनुरोध को प्रतिक्रिया, शीर्ष लेख में शामिल होना चाहिए, Access-Control-Allow-Origin: *

बाल्टी के लिए मेरी कोर सेटिंग्स इस तरह दिखता है:

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

जैसा कि आप उम्मीद कर सकते हैं कि कोई Originप्रतिक्रिया हैडर नहीं है।

— Wowzaaa
स्रोत

4

के संभावित डुप्लिकेट stackoverflow.com/questions/17570100/...

— केविन बॉर्डर

1

इसमें से एक चीज़ गायब है: <ExposeHeader> Access-Control-allow-Origin- </ ExposeHeader>

— दिमित्री

197

आमतौर पर, आपको बस इतना करना है कि आप अपने बकेट प्रॉपर्टीज में "CORS कॉन्फ़िगरेशन जोड़ें"।

अमेज़न स्क्रीन शॉट

<CORSConfiguration>कुछ मूलभूत मूल्यों के साथ आता है। आपकी समस्या को हल करने के लिए मुझे बस इतना ही चाहिए। बस "सहेजें" पर क्लिक करें और यह देखने के लिए फिर से प्रयास करें कि क्या यह काम किया है। यदि ऐसा नहीं होता है, तो आप नीचे दिए गए कोड को भी (alxrb उत्तर से) आज़मा सकते हैं, जो अधिकांश लोगों के लिए काम करता है।

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

अधिक जानकारी के लिए, आप इस लेख को एडिटिंग बकेट परमिशन पर पढ़ सकते हैं ।

— फ्लेवियो वुनेशे
स्रोत

4

यह संभव प्रतीत होता है। ऊपर दिए गए लिंक (उत्तर में) को पढ़ने की कोशिश करें या सीधे इस एक पर आगे बढ़ें: docs.aws.amazon.com/AmazonS3/latest/API/RESTBucketPUTcors.html

— Flavio Wuensche

7

धन्यवाद। बस इस पर सहेजें क्लिक करने से मेरे फोंट लोड करने की अनुमति दी गई।

— तानिया रास्किया

2

मुझे लगता है कि यह कभी-कभी काम करता है और दूसरी बार मुझे इसे संपादित करने के बाद भी ब्राउज़र त्रुटि मिलती है। यकीन नहीं होता कि इसका CloudFlare या S3 है।

— मार्क

4

आपको sHEADAllowedMethod

— jordanstephens

31

मेरे लिए काम नहीं करता है। फिर भी HEAD या GET अनुरोधों के जवाब में कोई 'एक्सेस-कंट्रोल-अलाउंस-ओरिजिन' हैडर नहीं है।

— carpiediem

104

मुझे वेब फोंस लोड करने में समान समस्या हो रही थी, जब मैंने बकेट प्रॉपर्टीज़ में 'कॉर्ड कॉन्फ़िगरेशन जोड़ें' पर क्लिक किया, तो यह कोड पहले से ही था:

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

मैंने सिर्फ सेव पर क्लिक किया और इसने एक ट्रीट काम किया, मेरे कस्टम वेब फोंट IE & Firefox में लोड हो रहे थे। मैं इस पर कोई विशेषज्ञ नहीं हूं, मुझे लगा कि यह आपकी मदद कर सकता है।

— alxrb
स्रोत

12

धन्यवाद! इसने मेरे लिए यह किया। मुझे '' CORS कॉन्फ़िगरेशन जोड़ने '' पर क्लिक करने के रूप में मिला है, लेकिन मुझे नहीं लगा कि मुझे 'save' पर क्लिक करना है क्योंकि मुझे लगा कि मैं डिफ़ॉल्ट कॉन्फ़िगरेशन देख रहा था। डी 'ओह।

— जैक कुशमैन 15

35

मुझे <AllowedHeader>*</AllowedHeader>इसे काम करने के लिए निर्धारित करना था (केवल ऐसा करते समय आपकी साइट के लिए एक नया नियम बनाने के लिए बेहतर है)

— संसद

4

@ अपारदर्शिता का जादू वहां था, जैसा कि अन्य सभी उपर्युक्त सेटिंग्स ने तब तक नहीं किया जब तक कि <AllowedHeader> को वाइल्डकार्ड पर सेट नहीं किया गया। हुर्रे।

— नील मेजी

मैं CORS सेटिंग में गया और वहां वही सेटिंग मिली, लेकिन <AllowedOrigin> * </ AllowedOrigin> सेव को हिट करते ही मैं सक्रिय हो गया। यह पहले नहीं था।

— डीवीएमएन

1

यही वह था,

— lapinkoira

48

यदि आपका अनुरोध Originहेडर निर्दिष्ट नहीं करता है , तो S3 प्रतिक्रिया में CORS हेडर शामिल नहीं करेगा। यह वास्तव में मुझे फेंक दिया क्योंकि मैं कॉर्स का परीक्षण करने के लिए फ़ाइलों को कर्ल करने की कोशिश कर रहा था, लेकिन कर्ल शामिल नहीं है Origin।

— eremzeit
स्रोत

2

मैं 2 से इंटरनेट पर देख रहा था, सप्ताह के सभी लेख और उत्तर S3 CORS विन्यास को बदलने के बारे में बात कर रहे थे जो मैंने कहा था, लेकिन प्रतिक्रिया पर कोई बदलाव नहीं हुआ, जब तक मैंने आपके उत्तर को नहीं देखा, इससे मुझे समझ में आया, मैंने इसका उपयोग करके परीक्षण किया डाकिया और उसके काम करने वाले! बहुत बहुत शुक्रिया

— अब्दुल्ला अवध अलखवल्दह '’

1

किसी को भी पता है कि मैं एक imgटैग के हेडर को कैसे बदल सकता हूं ? मैं विभिन्न हेडर नहीं भेज सकता, ब्राउज़र अनुरोध भेजता है

— ईडन

1

OMG यह कहीं भी प्रलेखित है?

— डार्कोविक

2

यह :) है: docs.aws.amazon.com/AmazonS3/latest/dev/… > सत्यापित करें कि अनुरोध में मूल शीर्षलेख है। यदि शीर्ष लेख अनुपलब्ध है, तो Amazon S3 अनुरोध को क्रॉस-ऑरिजिनल अनुरोध के रूप में नहीं मानता है, और प्रतिक्रिया में CORS प्रतिक्रिया हेडर नहीं भेजता है।

— डार्कोविक

46

@jordanstephens ने एक टिप्पणी में यह कहा था, लेकिन यह एक तरह से खो गया और मेरे लिए वास्तव में आसान था।

मैंने बस HEAD तरीका जोड़ा और सेव पर क्लिक किया और यह काम करने लगा।

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>

स्निपेट का विस्तार करें

— सेनिका गोंजालेज
स्रोत

3

यह 17 जनवरी 2018 तक काम करता है, स्वीकृत उत्तर एक अपमान है। lol

— Lasec0203

4

हां। यह Chrome में "नहीं 'एक्सेस-कंट्रोल-अलाउंस-ओरिजिन' हेडर" को ठीक करता है जब AWS S3 से फोंट जैसी चीजों को GET-ing करता है।

— Nostalg.io

1

हाँ! बहुत बहुत धन्यवाद। अनुमति देने की HEADविधि ने चाल चली।

— Zac

37

यह काम करने का एक सरल तरीका है।

मुझे पता है कि यह एक पुराना सवाल है, लेकिन फिर भी इसका हल ढूंढना मुश्किल है।

शुरू करने के लिए, इसने मेरे लिए रेल 4, पेपरक्लिप 4, कैमनजस, हेरोकू और एडब्ल्यूएस एस 3 के साथ निर्मित एक परियोजना पर काम किया।

आपको crossorigin: "anonymous"पैरामीटर का उपयोग करके अपनी छवि का अनुरोध करना होगा।

    <img href="your-remote-image.jpg" crossorigin="anonymous">

AWS S3 में अपनी साइट URL को CORS में जोड़ें। यहाँ उस बारे में अमेज़न से एक पुष्टि है। काफी, बस अपने बाल्टी के पास जाओ, और फिर " गुण टैब से सही पर, खुले" " अनुमतियां टैब और फिर, पर क्लिक करें" संपादित करें CORS विन्यास "।

मूल रूप से, मैंने < AllowedOrigin>निर्धारित किया था *। बस उस URL को अपने URL में बदलें, जैसे http://और https://अलग लाइनों में विकल्पों को शामिल करना सुनिश्चित करें । मैं उम्मीद कर रहा था कि तारांकन "सभी" को स्वीकार करता है, लेकिन स्पष्ट रूप से हमें इससे अधिक विशिष्ट होना होगा।

यह मेरे लिए कैसा दिखता है।

— होरासियो
स्रोत

1

स्वीकृत उत्तर के विपरीत, यह वास्तव में काम करता है! यहां तक कि इस S3 को लोड करने वाली सीडीएनडी क्लाउड इन हेडर की नकल कर रही है। शुक्रिया दोस्त मुझे कुछ घंटे बचाया!

— बराबर 8

5

यदि आप CloudFront का उपयोग कर रहे हैं, तो आप इस पर भी गौर कर सकते हैं - blog.celingest.com/en/2014/10/02/…

— Kunal

1

@ कुणाल के लिंक के लिए धन्यवाद। CloudFront इस समीकरण में जटिलता की एक परत जोड़ता है।

— टायलर कोलियर

1

मैं जहाँ तक MDN डॉक्स पर गया था <img>, लेकिन मैं केवल crossOrigin="true"गलती से डाल दिया था। धन्यवाद!

— Cezille07

वाह यह वास्तव में मेरे लिए चाल चली गई! मैं इसे लोकलहोस्ट पर उपयोग करने में सक्षम हूं और मैं तारांकन का भी उपयोग कर सकता हूं, कुंजी सिर्फ मेरे html एलिमेंट में क्रॉसोरिगिन = "अनाम" जोड़ने के लिए थी: डी

— अलेक्जेंडर

23

उपरोक्त उत्तर देखें। (लेकिन मेरे पास एक क्रोम बग भी था)

CHROME में पृष्ठ पर छवि को लोड और प्रदर्शित न करें। (यदि आप बाद में एक नया उदाहरण बनाने जा रहे हैं)

मेरे मामले में, मैंने चित्र लोड किए और उन्हें पृष्ठ पर प्रदर्शित किया। जब उन्हें क्लिक किया गया, तो मैंने उनका एक नया उदाहरण बनाया:

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

Chrome ने पहले ही एक और संस्करण कैश कर लिया था और कभी भी संस्करण को फिर से लाने की कोशिश नहीं की crossorigin(भले ही मैं crossoriginप्रदर्शित चित्रों पर उपयोग कर रहा था ।

ठीक करने के लिए, मैंने ?crossoriginछवि url के अंत में जोड़ा (लेकिन आप जोड़ सकते हैं ?blah, यह कैश स्थिति बदलने के लिए सिर्फ मनमाना है) जब मैंने इसे कैनवास के लिए लोड किया था .. तो मुझे बताएं कि क्या आपको CHROME के लिए बेहतर फ़िक्स मिल गया है

— Funkodebat
स्रोत

5

कैशिंग मेरी समस्या भी साबित हुई (मैं स्वीकृत उत्तरों की कोशिश करने के बाद)। इसके लिए धन्यवाद।

— फियरमेडियोसिटी

साथ ही क्रोम पर कैश की समस्या थी। आसान तय: उपकरण / सेटिंग्स> ब्राउज़िंग डेटा साफ़ करें ...> कैश्ड छवियां और फाइलें हालांकि उन उपयोगकर्ताओं के लिए एक और समाधान की आवश्यकता हो सकती है जो इस मुद्दे का सामना कर सकते हैं।

— स्टीव जूल

1

इस उत्तर के लिए धन्यवाद! मुझे क्रोम के साथ भी यही समस्या थी और मुझे जवाब नहीं मिला।

— वैंडरिल्ले

1

अगर कोरस के साथ समस्या है तो सभी लोगों को यह प्रयास करने की आवश्यकता है !! मेरा दिन बचाओ!

— संगवारी 82२ २19

23

मैं सिर्फ इस उत्तर को जोड़ूंगा-जो मेरे मुद्दे को हल करता है।

कॉर्स ओरिजनल हैडर को टॉर्चर करने के लिए एडब्ल्यूएस / क्लाउडफ्रंट डिस्ट्रीब्यूशन पॉइंट सेट करने के लिए, डिस्ट्रीब्यूशन पॉइंट के लिए एडिट इंटरफेस पर क्लिक करें:

व्यवहार टैब पर जाएं और किसी भी श्वेतसूची से "कैश ऑन सिलेक्टेड रिक्वेस्ट हेडर्स" पर बदलते हुए व्यवहार को संपादित करें, फिर सुनिश्चित करें Originकि श्वेतसूची में जोड़ा गया है। अधिक के लिए AWS डॉक्स में CORS सेटिंग्स का सम्मान करने के लिए CloudFront को कॉन्फ़िगर करना देखें ।

— MikeiLL
स्रोत

आपको HTTP विधियों को क्या सेट करना चाहिए?

— शिक्षार्थी

आपका मतलब है GET, POST, DELETE, आदि ...? उन लोगों से अनुरोध कहाँ किया जा रहा है?

— मिकीएलएल

क्या आप अपने प्रश्न को फिर से उद्धृत कर सकते हैं, इसलिए मैं समझ सकता हूं कि क्या आप cf वेब फ़ॉर्म या s3 संसाधन का अनुरोध करने वाले एप्लिकेशन का उल्लेख कर रहे हैं? पूर्व है, तो एक HTTP विधियों विकल्प है कि डॉक्स यहाँ में बताया गया है है docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/...

— लर्नर

लगता है जैसे आप पूछ रहे थे कि HTTP Request MethodsAWS के भीतर क्या सेट होना चाहिए। और उस सवाल के लिए, मुझे नहीं लगता कि किसी को भी कहीं भी सेट करने की आवश्यकता है। यदि आप संसाधन का अनुरोध करने वाले एप्लिकेशन के बारे में बात कर रहे हैं, तो मेरा मानना है कि आप बस इसके द्वारा फ़ाइल का अनुरोध करेंगे url string: यानी एक छवि, वीडियो, ऑडियो फ़ाइल।

— मिकीएलएल

वह गायब टुकड़ा था! धन्यवाद! मैंने इसके ऊपर सभी उत्तरों की कोशिश की और इन हेडरों को सफेद करने के बाद ही इसने मेरे लिए लोकलहोस्ट पर काम किया

— ओमर लेशेम

11

मुझे S3 से जावास्क्रिप्ट 3D व्यूअर (3D HOP) में 3D मॉडल लोड करने में समान समस्याएँ हो रही थीं, लेकिन केवल कुछ फ़ाइल प्रकारों (.nxs) के साथ ही यह काफी अजीब था।

इसमें मेरे लिए क्या तय बदल रहा था AllowedHeaderडिफ़ॉल्ट से Authorizationकरने के लिए *CORS config में:

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

— veuncent
स्रोत

3

<AllowedHeader>*</AllowedHeader>अक्टूबर 2017 में क्रोम के लिए एक तारांकन चिह्न के साथ इस तरह सेट करने की आवश्यकता है। बहुत बहुत धन्यवाद! (इसके अलावा, सेटिंग के बाद ब्राउज़र कैश को साफ़ करना न भूलें)।

— Nostalg.io

छोटा बिंदु - मुझे नहीं लगता कि आपको बदलने की आवश्यकता है AllowedHeader। मैं भी यहाँ एक ही मुद्दा था, लेकिन यह पता चला है कि यह पिछली प्रतिक्रिया ( MaxAgeSeconds) को कैच करने वाला ब्राउज़र था । DevTools Settings में आप कंसोल को ओपन करते समय कैशे को इग्नोर कर सकते हैं। एक बार जब यह किया गया था, यह मेरे लिए काम करना शुरू कर दिया

— 18'11

AllowedHeader> * <ने निश्चित रूप से मेरे लिए इस मुद्दे को तय किया। यह केवल तब लागू हो सकता है जब अनुरोध किसी विशेष xhr पुस्तकालय के माध्यम से भेजा जाता है? मैं Axios का उपयोग कर रहा हूँ और इसे आवश्यक पाया।

— जेरेमी

6

दूसरों के राज्यों की तरह, आपको सबसे पहले अपने S3 बाल्टी में CORS कॉन्फ़िगरेशन की आवश्यकता है:

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

लेकिन ऐसा करने के बाद मेरे मामले में, यह अभी भी काम नहीं कर रहा था। मैं क्रोम का उपयोग कर रहा था (शायद अन्य ब्राउज़रों के साथ भी यही समस्या है)।

समस्या यह थी कि क्रोम हेडर के साथ छवि को कैश कर रहा था (कॉर्स डेटा नहीं है ) , इसलिए कोई फर्क नहीं पड़ता कि मैंने एडब्ल्यूएस में बदलने की कोशिश की, मैं अपने कॉर्स हेडर नहीं देखूंगा।

Chrome कैश साफ़ करने और पृष्ठ को पुनः लोड करने के बाद , छवि में अपेक्षित CORS हेडर थे

— Tonio
स्रोत

1

धन्यवाद! यह कैशिंग मुद्दा मुझे पागल कर रहा था। Chrome (संस्करण 73) पर कैश को आसानी से साफ़ करने का तरीका जानने वाले किसी भी व्यक्ति के लिए, पुनः लोड बटन पर क्लिक करें और 'खाली कैश और हार्ड रीलोड' चुनें। फिर आप <5 सेकंड के भीतर अपने S3 CORS में किए गए किसी भी परिवर्तन का प्रभाव देखेंगे। (शायद अधिक तेज़ - यह कि ब्राउज़र टैब को स्विच करने में मुझे कितना समय लगता है।)

— thund

1

यह मेरी समस्या थी। मेरी बाल्टी में उचित CORS विन्यास था, मेरा ब्राउज़र बस आपको बहुत ही कुशल तरीके से कुशल बना रहा था।

— डैनियल ब्रैडी

5

मैंने ऊपर सभी उत्तरों की कोशिश की और कुछ भी काम नहीं किया। वास्तव में, हमें काम करने के लिए एक साथ उपरोक्त उत्तरों से 3 चरणों की आवश्यकता है:

जैसा कि फ्लेवियो द्वारा सुझाया गया है; अपनी बाल्टी पर CORS कॉन्फ़िगरेशन जोड़ें:
```
<CORSConfiguration>
   <CORSRule>
     <AllowedOrigin>*</AllowedOrigin>
     <AllowedMethod>GET</AllowedMethod>
   </CORSRule>
 </CORSConfiguration>
```
छवि पर; क्रॉसोरिगिन का उल्लेख करें:
```
<img href="abc.jpg" crossorigin="anonymous">
```
क्या आप CDN का उपयोग कर रहे हैं? यदि सब कुछ मूल सर्वर से कनेक्ट करने के लिए ठीक काम करता है, लेकिन सीडीएन के माध्यम से नहीं; इसका मतलब है कि आपको अपने CDN पर कुछ सेटिंग की आवश्यकता है जैसे कि CORS हेडर स्वीकार करें। सटीक सेटिंग इस बात पर निर्भर करती है कि आप किस CDN का उपयोग कर रहे हैं।

— दीपक सिंघल
स्रोत

धन्यवाद CDN हिस्सा बहुत महत्वपूर्ण है, क्या आप CDN स्तर पर क्या आवश्यक है का विवरण जोड़ सकते हैं?

— सेवलंडीग

5

मैं इस धागे पर आया, और उपरोक्त समाधानों में से कोई भी मेरे मामले पर लागू नहीं हुआ। यह पता चला है, मुझे बस<AllowedOrigin> अपने बाल्टी के कॉर्स कॉन्फ़िगरेशन में URL से एक अनुगामी स्लैश को निकालना था ।

विफल रहता है:

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

जीत:

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

मुझे आशा है कि यह किसी को कुछ बाल खींचने से बचाता है।

— चरनी काये
स्रोत

3

आप 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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

S3 केवल CORS हेडर जोड़ता है जब http अनुरोध में Originहेडर होता है।
CloudFront हेडर को डिफ़ॉल्ट रूप से अग्रेषित नहीं करता हैOrigin

आपको Originअपने CloudFront वितरण के लिए व्यवहार सेटिंग्स में श्वेतसूची हेडर की आवश्यकता है ।

— पावेल फुरमानीक
स्रोत

2

मैंने इसे निम्नलिखित लिखकर तय किया:

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

क्यों <AllowedHeader>*</AllowedHeader>काम कर रहा है और <AllowedHeader>Authorization</AllowedHeader>नहीं?

— पाब्लो गार्सिया मिरांडा
स्रोत

1

fwuensche "उत्तर" एक CDN सेट करने के लिए संक्षिप्त है; ऐसा करने पर, मैंने MaxAgeSeconds को हटा दिया।

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>

— मिशो। Gio।
स्रोत

1

नवीनतम S3 प्रबंधन कंसोल में, जब आप अनुमतियाँ टैब पर CORS कॉन्फ़िगरेशन पर क्लिक करते हैं, तो यह एक डिफ़ॉल्ट नमूना CORS कॉन्फ़िगरेशन दिखाएगा। यह विन्यास वास्तव में सक्रिय नहीं है, फिर भी! CORS को सक्रिय करने के लिए आपको सबसे पहले save पर क्लिक करना होगा।

मुझे यह पता लगाने में बहुत लंबा समय लगा, उम्मीद है कि यह किसी को कुछ समय बचाएगा।

— hackel
स्रोत

1

इस कॉन्फ़िगरेशन ने मेरे लिए समस्या हल कर दी:

<?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>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

— दिवाकर
स्रोत

मैं इस विन्यास और इस प्रश्न में कई अन्य उत्तरों के विन्यास के बीच बहुत कम अंतर देखता हूं। क्या इस कॉन्फ़िगरेशन को पोस्ट करने से पहले पुराने उत्तरों के कॉन्फ़िगरेशन का उपयोग करने का कोई प्रयास किया गया था?

— 17

1

चेतावनी - हैक।

यदि आप एक छवि प्रदर्शित करने के लिए S3Image का उपयोग करते हैं और बाद में इसे लाने की कोशिश करते हैं, तो शायद इसे एक पीडीएफ में डालें या कुछ अन्य प्रसंस्करण करें, यह चेतावनी दी जाए कि क्रोम पहले परिणाम को कैश करेगा जिसमें किसी कोर प्रीफ्लाइट अनुरोध की आवश्यकता नहीं है, और फिर उसी विकल्प को प्राप्त करने का प्रयास करें जो कि भ्रूण के लिए प्रीफ़लाइट ऑप्‍शन अनुरोध के बिना है और ब्राउज़र प्रतिबंधों के कारण विफल हो जाएगा।

इसके आसपास पाने का एक और तरीका यह सुनिश्चित करना है कि S3Image में क्रॉसोरिगिन शामिल है: 'उपयोग-क्रेडेंशियल्स' जैसा कि ऊपर उल्लेख किया गया है। उस फ़ाइल में जिसे आप S3Image का उपयोग करते हैं, (मेरे पास एक घटक है जो S3Image का कैश्ड संस्करण बनाता है, इसलिए यह मेरे लिए एकदम सही जगह है), इस विशेषता को शामिल करने के लिए बलपूर्वक S3Image के प्रोटोटाइप छविEl विधि को ओवरराइड करें।

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

403 समस्या अब हल हो गई है। दर्द क्या होता है!

— फिलिप मर्फी
स्रोत

1

<AllowedOrigin>*</AllowedOrigin>

एक अच्छा विचार नहीं है क्योंकि * आप अपनी बाल्टी में फ़ाइलों के लिए किसी भी वेबसाइट का उपयोग प्रदान करते हैं। इसके बजाय, आपको यह निर्दिष्ट करना चाहिए कि आपके बाल्टी से संसाधनों का उपयोग करने के लिए कौन से मूल की अनुमति है। आमतौर पर, यह आपके डोमेन नाम की तरह है

<AllowedOrigin>https://www.example.com</AllowedOrigin>

या यदि आप सभी संभव उप डोमेन शामिल करना चाहते हैं:

<AllowedOrigin>*.example.com</AllowedOrigin>

— रुडोल्फ बी
स्रोत

1

नीचे विन्यास है और मेरे लिए काम करना ठीक है। मुझे उम्मीद है कि यह AWS S3 पर आपके मुद्दे को हल करने में मदद करेगा।

<?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>
    <AllowedMethod>DELETE</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

— गौरांग सोंडागर
स्रोत

यह काम मुझसे दूर शुरू करने के लिए, तो मैं तरीकों कि जरूरत नहीं कर रहे थे को दूर करने, और केवल शीर्ष लेख मैं चाहता था करने के लिए यह निर्दिष्ट करके सुरक्षा कड़ी कर दी गई

— hitwill

0

स्वीकृत उत्तर काम करता है, लेकिन ऐसा लगता है कि यदि आप सीधे संसाधन पर जाते हैं, तो कोई क्रॉस-मूल हेडर नहीं हैं। यदि आप क्लाउडफ्रंट का उपयोग कर रहे हैं, तो यह हेडर के बिना संस्करण को कैश करने के लिए क्लाउडफ्रंट का कारण बनेगा। जब आप तब एक अलग यूआरएल पर जाते हैं जो इस संसाधन को लोड करता है, तो आपको यह क्रॉस-ऑरिजनल इश्यू मिलेगा।

— TigerBear
स्रोत

0

यदि आपकी CORS सेटिंग्स आपकी मदद नहीं करती हैं।

सत्यापित करें कि S3 सही है। मेरे पास एक अमान्य बाल्टी नाम था Storage.configure। मैंने बाल्टी के एक छोटे नाम का उपयोग किया और यह एक त्रुटि का कारण बना:

अनुरोधित संसाधन पर कोई 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर मौजूद नहीं है।

— सिकंदर
स्रोत

0

सबसे पहले, अपने S3 बाल्टी में कॉर्स को सक्रिय करें। मार्गदर्शन के रूप में इस कोड का उपयोग करें:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

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

2) यदि यह अभी भी काम नहीं कर रहा है, तो अपने img टैग के लिए "*" मान के साथ एक "क्रॉसोरिगिन" भी जोड़ना सुनिश्चित करें। इसे अपनी html फ़ाइल में रखें:

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

— ईसाई सावेद्रा
स्रोत

-1

इसके लायक क्या है, मेरे पास एक समान मुद्दा है - जब एक विशिष्ट अनुमत मूल (नहीं *) को जोड़ने की कोशिश की जा रही है ।

मुझे पता है कि मुझे सही करना था

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

सेवा

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

(URL में अंतिम स्लैश नोट करें)

आशा है कि यह किसी की मदद करता है

— योसी वेनतेतिन
स्रोत