S3 - Erişim-Kontrol-İzin Verme Başlığı

Access-Control-Allow-OriginYanıt başlıklarına ekleme yapabilen var mı? İhtiyacım olan böyle bir şey:

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

Bu alma isteği yanıtta, başlıkta, Access-Control-Allow-Origin: *

Grup için CORS ayarlarım şöyle:

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

Tahmin edebileceğiniz gibi herhangi bir Originyanıt başlığı yok .

Genellikle, yapmanız gereken tek şey, kova özelliklerinizde "CORS Yapılandırması Eklemek" tir.

<CORSConfiguration>Bazı varsayılan değerleri ile birlikte gelir. Sorununu çözmek için ihtiyacım olan tek şey bu. "Kaydet" i tıklayın ve çalışıp çalışmadığını görmek için tekrar deneyin. Değilse, çoğu insan için işe yaramış gibi görünen aşağıdaki kodu da (alxrb yanıtından) deneyebilirsiniz.

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

Daha fazla bilgi için Kova İzinlerini Düzenleme ile ilgili bu makaleyi okuyabilirsiniz .

Kova özelliklerinde 'CORS yapılandırması ekle'yi tıkladığımda, web yazı tiplerini yüklemede benzer bir sorun yaşıyordum, bu kod zaten vardı:

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

Kaydet'i tıkladım ve bir tedavi yaptı, özel web yazı tiplerim IE & Firefox'ta yükleniyordu. Bu konuda uzman değilim, bunun size yardımcı olabileceğini düşündüm.

İsteğiniz bir Originbaşlık belirtmezse , S3 yanıtta CORS başlıklarını içermez. Gerçekten benim attı Bu benim CORS'yi test etmek dosyaları kıvrılıp çalışıyor tuttu çünkü bukle içermez Origin.

@jordanstephens bir yorumda söyledi, ama bu tür kaybolur ve benim için gerçekten kolay bir düzeltme oldu.

Sadece HEAD yöntemini ekledim ve kaydedilmiş tıkladım ve çalışmaya başladı.

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

Bu işi yapmanın basit bir yoludur.

Bunun eski bir soru olduğunu biliyorum, ama yine de bir çözüm bulmak zor.

Başlamak için, bu benim için Rails 4, Paperclip 4, CamanJS, Heroku ve AWS S3 ile inşa edilen bir projede çalıştı.

crossorigin: "anonymous"Parametreyi kullanarak resminizi istemelisiniz.

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

Site URL'nizi AWS S3'teki CORS'a ekleyin. İşte Amazon'dan bu konuda bir referans. Hemen hemen, grubunuza gidin ve sağdaki sekmelerden " Özellikler " i seçin , " İzinler sekmesini açın ve" CORS Yapılandırmasını Düzenle "yi tıklayın.

Başlangıçta < AllowedOrigin>ayarlamıştım *. Bu yıldız işaretini URL'nizle değiştirin, ayrı satırlarda http://ve gibi seçenekler eklediğinizden emin olun https://. Yıldız işaretinin "Tümü" nü kabul etmesini bekliyordum, ama görünüşe göre bundan daha spesifik olmalıyız.

Bana öyle geliyor.

Yukarıdaki cevaplara bakınız. (ama ben de krom hatası aldım)

Görüntüyü CHROME içindeki sayfaya yüklemeyin ve göstermeyin. (daha sonra yeni bir örnek oluşturacaksanız)

Benim durumumda, görüntüleri yükledim ve sayfada görüntüledim. Tıklandıklarında yeni bir örnek oluşturdum:

// 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 zaten başka bir sürümü önbelleğe almıştı ve ASLA sürümü yeniden getirmeyi denemedim crossorigin( crossorigingörüntülenen resimlerde kullanıyor olsam bile) .

Düzeltmek için tuval için yüklediğimde ?crossoriginresim URL'sinin sonuna ekledim (ancak ekleyebilirsiniz ?blah, önbellek durumunu değiştirmek sadece keyfi) .. CHROME için daha iyi bir düzeltme bulursanız bana bildirin

Sorunumu çözen bu cevaba ( yukarıda) ekleyeceğim .

AWS / CloudFront Dağıtım Noktasını CORS Origin Başlığını torward edecek şekilde ayarlamak için Dağıtım Noktası'nın düzenleme arayüzüne tıklayın:

Davranışlar sekmesine gidin ve "Seçilen İstek Üstbilgilerine Dayalı Önbellek" i Yoktan Beyaz Listeye değiştirerek davranışı düzenleyin, ardından Originbeyaz listeye eklenmiş kutunun eklendiğinden emin olun . Daha fazla bilgi için bkz. CloudFront'u AWS Dokümanlarındaki CORS Ayarlarına Saygı Gösterecek Şekilde Yapılandırma .

3D modelleri S3'ten javascript 3D görüntüleyiciye (3D HOP) yüklerken benzer sorunlar yaşıyordum, ancak garip bir şekilde sadece belirli dosya türleriyle (.nxs).

Ne benim için sabit değişiyordu AllowedHeadervarsayılan Authorizationiçin *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>

Diğerlerinin durumları gibi, önce S3 grubunuzda CORS yapılandırmasına sahip olmanız gerekir:

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

Ama benim durumumda bunu yaptıktan sonra hala çalışmıyor. Chrome kullanıyordum (muhtemelen diğer tarayıcılarda da aynı sorun var).

Sorun, Chrome'un görüntüyü başlıklarla önbelleğe almasıydı (CORS verilerini içermiyordu ) , bu yüzden AWS'de ne değiştirmeye çalışsam da, CORS başlıklarını görmezdim.

Chrome önbelleğini temizledikten ve sayfayı yeniden yükledikten sonra görüntüde beklenen CORS Üstbilgileri vardı

Yukarıdaki tüm cevapları denedim ve hiçbir şey işe yaramadı. Aslında, çalışmasını sağlamak için yukarıdaki cevaplardan 3 adım birlikte ihtiyacımız var:

1. Flavio tarafından önerildiği gibi; grubunuza CORS yapılandırmasını ekleyin:

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

2. Görüntüde; crossorigin'den bahsedin:

   <img href="abc.jpg" crossorigin="anonymous">
   

3. CDN mi kullanıyorsunuz? Her şey orijinal sunucuya bağlanırsa çalışır, ancak CDN üzerinden DEĞİLDİR; CDN'nizde CORS başlıklarını kabul etmek gibi bazı ayarlara ihtiyacınız olduğu anlamına gelir. Tam ayar hangi CDN'yi kullandığınıza bağlıdır.

Bu konuya vardım ve yukarıdaki çözümlerin hiçbiri davam için geçerli değildi. Anlaşılan , benim kova CORS yapılandırmasında URL'den bir eğik çizgi kaldırmak zorunda kaldı<AllowedOrigin> .

başarısız:

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

Kazanılan:

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

Umarım bu birileri saçlarını kurtarır.

1. S3 grubunuz için İzinler ayarlarında CORS yapılandırmasını ayarlama

   <?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 üstbilgilerini yalnızca http isteği Originüstbilgiye sahip olduğunda ekler .

3. CloudFront değil ileriye Originvarsayılan başlık

   OriginCloudFront Dağıtımınız için Davranış ayarlarında başlığı beyaz listeye eklemeniz gerekir.

Aşağıdaki yazarak düzeltti:

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

Neden <AllowedHeader>*</AllowedHeader>çalışıyor ve <AllowedHeader>Authorization</AllowedHeader>çalışmıyor?

fwuensche "cevap" bir CDN kurmak için korsedir; bunu yaparken, MaxAgeSeconds kaldırıldı.

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

En son S3 Yönetim Konsolu'nda, İzinler sekmesindeki CORS yapılandırmasını tıklattığınızda, varsayılan bir örnek CORS yapılandırması gösterilir. Bu yapılandırma değil aslında aktif ! CORS'u etkinleştirmek için önce kaydet'e tıklamanız gerekir.

Bunu çözmem çok uzun sürdü, umarım bu biraz zaman kazandıracaktır.

Bu yapılandırma sorunu benim için çözdü:

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

Uyarı - Hack.

S3Image'ı bir görüntüyü görüntülemek ve daha sonra getirme yoluyla almaya çalışırsanız, belki bir PDF'ye eklemek veya başka bir işlem yapmak istiyorsanız, Chrome'un bir CORS ön kontrol isteği gerektirmeyen ilk sonucu önbelleğe alacağı konusunda uyarınız ve daha sonra getirme için ön kontrol OPTIONS isteği olmadan aynı kaynağı almaya çalışın ve tarayıcı kısıtlamaları nedeniyle başarısız olacaktır.

Bunu aşmanın bir başka yolu, S3Image'ın yukarıda belirtildiği gibi crossorigin: 'use-credentials' içerdiğinden emin olmaktır. S3Image kullandığınız dosyada, (S3Image önbelleğe alınmış bir sürümünü oluşturan bir bileşen var, bu yüzden benim için mükemmel bir yer budur), bu özelliği eklemek için zorlamak için S3Image'ın prototip imageEl yöntemini geçersiz kılar.

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 sorunu çözüldü. Ne acı aggrr!

<AllowedOrigin>*</AllowedOrigin>

iyi bir fikir değildir çünkü * ile herhangi bir web sitesine grubunuzdaki dosyalara erişim izni verirsiniz. Bunun yerine, hangi kaynağın grubunuzdaki kaynakları kullanmasına tam olarak izin verileceğini belirtmelisiniz. Genellikle, alan adınız

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

veya tüm olası alt alan adlarını dahil etmek istiyorsanız:

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

Aşağıda yapılandırma ve benim için çalışmak iyi. Umarım AWS S3'teki sorununuzu çözmenize yardımcı olacaktır.

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

Kabul edilen cevap işe yarıyor, ancak kaynağa doğrudan giderseniz, çapraz kaynak üstbilgileri yok gibi görünüyor. Cloudfront kullanıyorsanız, bu cloudfront'un üstbilgi olmadan sürümü önbelleğe almasına neden olur.

CORS ayarlarınız size yardımcı olmazsa.

S3 yapılandırmasının doğru olduğundan emin olun. Konumunda geçersiz bir grup adım vardı Storage.configure. Kısa bir kova adı kullandım ve bir hataya neden oldu:

İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok.

İlk olarak, S3 grubunuzdaki CORS'u etkinleştirin. Bu kodu kılavuz olarak kullanın:

<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) Hala çalışmıyorsa, img etiketlerinize "*" değerine sahip bir "crossorigin" eklediğinizden emin olun. Bunu html dosyanıza koyun:

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

Değeri için, benzer bir sorun yaşadım - izin verilen belirli bir kökeni eklemeye çalışırken (değil *).

Düzeltmek zorunda olduğum ortaya çıkıyor

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

için

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

(URL'deki son slah'a dikkat edin)

Umarım bu birine yardımcı olur