it-swarm.dev

S3 - رأس التحكم في الوصول - السماح - الأصل

هل تمكن أي شخص من إضافة 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: *

تبدو إعدادات 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>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

كما قد تتوقع عدم وجود عنوان استجابة Origin.

146
Wowzaaa

عادة ، كل ما عليك فعله هو "إضافة تكوين CORS" في خصائص المجموعة الخاصة بك.

Amazon-screen-shot

<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> 

لمزيد من المعلومات ، يمكنك قراءة هذه المقالة على تحرير إذن الجرافة .

147
Flavio Wuensche

كنت أواجه مشكلة مماثلة عند تحميل خطوط الويب ، عندما قمت بالنقر فوق "إضافة تكوين 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>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

لقد قمت فقط بالنقر فوق "حفظ" وعملت بنجاح ، وكانت خطوط الويب المخصصة الخاصة بي يتم تحميلها في IE & Firefox. أنا لست خبيرا في هذا ، لقد اعتقدت أن هذا قد يساعدك.

93
alxrb

@ jordanstephens قال هذا في تعليق ، لكن هذا النوع من الضياع كان حلًا سهلًا جدًا بالنسبة لي.

لقد قمت ببساطة بإضافة طريقةHEAD والنقر فوق حفظها وبدأ العمل.

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

إذا لم يحدد طلبك رأس Origin ، فلن يقوم S3 بتضمين رؤوس CORS في الاستجابة. لقد ألقى بي هذا حقًا لأنني ظللت أحاول حليقة الملفات لاختبار CORS لكن الضفيرة لا تتضمن Origin.

30
eremzeit

هذه طريقة بسيطة لإنجاح هذا العمل.

أعلم أن هذا سؤال قديم ، لكن لا يزال من الصعب إيجاد حل له.

للبدء ، نجح هذا الأمر بالنسبة لي في مشروع تم إنشاؤه باستخدام Rails 4 و Paperclip 4 و CamanJS و Heroku و AWS S3.


يجب أن تطلب صورتك باستخدام المعلمة crossorigin: "anonymous".

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

أضف عنوان URL الخاص بموقعك إلى CORS في AWS S3. هنا هو revererence من أمازون حول ذلك. إلى حد كبير ، فقط انتقل إلى المجموعة الخاصة بك ، ثم حدد " خصائص " من علامات التبويب على اليمين ، افتح " أذونات علامة تبويب ، ثم انقر فوق" تحرير تهيئة CORS ".

في الأصل ، قمت بتعيين < AllowedOrigin> على *. فقط قم بتغيير هذه العلامة النجمية إلى عنوان URL الخاص بك ، تأكد من تضمين خيارات مثل http:// و https:// في سطور منفصلة. كنت أتوقع أن النجمة تقبل "الكل" ، لكن من الواضح أننا يجب أن نكون أكثر تحديداً من ذلك.

هذه هي الطريقة التي تبدو لي.

 enter image description here 

28
Horacio

انظر أعلاه الإجابات. (ولكن كان لدي خلل في الكروم أيضًا)

لا تقم بتحميل وعرض الصورة على الصفحة في كروم. (إذا كنت ستقوم لاحقًا بإنشاء مثيل جديد)

في حالتي ، قمت بتحميل الصور وعرضها على الصفحة. عند النقر فوقها ، قمت بإنشاء مثيل جديد منها:

// 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 بالفعل بتخزين نسخة أخرى مؤقتًا وحاول NEVER إعادة جلب الإصدار crossorigin (حتى لو كنت أستخدم crossorigin على الصور المعروضة.

للإصلاح ، أضفت ?crossorigin إلى نهاية عنوان url للصورة (ولكن يمكنك إضافة ?blah ، إنه أمر تعسفي فقط تغيير حالة ذاكرة التخزين المؤقت) عندما قمت بتحميله للقماش .. اسمح لي أن أعرف إذا وجدت إصلاحًا أفضل لكروم

17
Funkodebat

سأضيف فقط إلى هذه الإجابة - أعلاه - التي حلت مشكلتي.

لتعيين نقطة توزيع AWS/CloudFront لتوجيه رأس أصل CORS ، انقر فوق واجهة التحرير لنقطة التوزيع:

 enter image description here 

انتقل إلى علامة تبويب السلوكيات وقم بتحرير السلوك ، وتغيير رؤوس القائمة البيضاء من بلا إلى القائمة البيضاء ، ثم تأكد من إضافة Origin إلى مربع القائمة البيضاء.

 enter image description here 

15
MikeiLL

كنت أواجه مشكلات مماثلة أثناء تحميل النماذج ثلاثية الأبعاد من S3 إلى عارض جافا سكريبت ثلاثي الأبعاد (3D HOP) ، لكن الغريب فقط مع أنواع ملفات معينة (.nxs).

ما تم إصلاحه بالنسبة لي كان تغيير AllowedHeader من الافتراضي Authorization إلى * في تهيئة 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>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
9
VME
  1. قم بتعيين تكوين CORS في إعدادات أذونات لك دلو S3

    <?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> 
    
  2. يضيف S3 رؤوس CORS فقط عندما يكون طلب http رأس Origin.

  3. CloudFront لا forward Origin رأس بشكل افتراضي

    تحتاج إلى إدراج رأس Origin في إعدادات السلوك لتوزيع CloudFront الخاص بك.

3
Pawel Furmaniak

جربت جميع الإجابات أعلاه ولم ينجح شيء. في الواقع ، نحتاج إلى 3 خطوات من الإجابات أعلاه معًا لجعلها تعمل:

  1. كما اقترح فلافيو. إضافة تكوين CORS على دلو الخاص بك:

    <CORSConfiguration>
       <CORSRule>
         <AllowedOrigin>*</AllowedOrigin>
         <AllowedMethod>GET</AllowedMethod>
       </CORSRule>
     </CORSConfiguration>
    
  2. على الصورة أذكر crossorigin:

    <img href="abc.jpg" crossorigin="anonymous">
    
  3. هل تستخدم CDN؟ إذا كان كل شيء يعمل بشكل جيد عند الاتصال بخادم Origin ولكن ليس عبر CDN ؛ فهذا يعني أنك بحاجة إلى بعض الإعدادات على CDN مثل قبول رؤوس CORS. يعتمد الإعداد الدقيق على CDN الذي تستخدمه.

3
Deepak

لقد قمت بإصلاحه بكتابة ما يلي:

<?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> لا؟

2
Pablo García Miranda

وصلت إلى هذا الموضوع ، ولم يتم تطبيق أي من الحلول المذكورة أعلاه على حالتي. اتضح ، اضطررت ببساطة إلى إزالة شرطة مائلة زائدة من عنوان URL <AllowedOrigin>في تهيئة CORS للمجموعة الخاصة بي.

فشل:

<?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>

آمل أن ينقذ هذا الشخص بعض الشعر.

2
Charney Kaye

wuensche "الجواب" هو الصحيح لإعداد CDN ؛ عند القيام بذلك ، قمت بإزالة MaxAgeSeconds.

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
1
Mich. Gio.

مثل غيرها من الدول ، تحتاج أولاً إلى تكوين CORS في دلو S3 الخاص بك:

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

ولكن في حالتي بعد القيام بذلك ، كان لا يزال لا يعمل. كنت أستخدم Chrome (ربما نفس المشكلة مع المتصفحات الأخرى).

كانت المشكلة أن كان Chrome يقوم بتخزين الصورة مؤقتًا بالرؤوس (لا تحتوي على بيانات CORS) لذلك ، بغض النظر عما حاولت تغييره في AWS ، لن أرى رؤوس CORS الخاصة بي.

بعد مسح ذاكرة التخزين المؤقت لمتصفح Chrome وإعادة تحميل الصفحة ، كانت الصورة تحتوي على رؤوس CORS المتوقعة

1
Tonio

هذا التكوين حل المشكلة بالنسبة لي:

<?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>
1
DIWAKAR

في أحدث وحدة تحكم إدارة S3 ، عند النقر فوق تكوين CORS في علامة التبويب أذونات ، ستظهر تكوين CORS نموذجي افتراضي. هذا التكوين هو لا نشط بالفعل ، ولكن! عليك أولاً النقر فوق "حفظ" لتنشيط CORS.

استغرق الأمر وقتًا طويلاً لمعرفة ذلك ، ونأمل أن يوفر هذا بعض الوقت.

0
hackel

تعمل الإجابة المقبولة ، لكن يبدو أنك إذا انتقلت إلى المورد مباشرةً ، فلن تكون هناك رؤوس متقاطعة. إذا كنت تستخدم cloudfront ، فسيؤدي ذلك إلى قيام cloudfront بتخزين النسخة المخبأة دون رؤوس. وعندما تنتقل إلى عنوان url مختلف يقوم بتحميل هذا المورد ، ستظهر لك هذه المشكلة.

0
TigerBear