S3-Access-Control-Allow-Origin Header

Miałem podobny problem z wczytywaniem czcionek internetowych, gdy kliknąłem na 'add Cors configuration', we właściwościach bucket, ten kod już tam był:

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

Po prostu kliknąłem Zapisz i zadziałało, moje niestandardowe czcionki internetowe ładowały się w IE & Firefox. Nie jestem w tym ekspertem, pomyślałem, że to może Ci pomóc.

@jordanstephens powiedział to w komentarzu, ale trochę się gubi i było dla mnie naprawdę łatwe.

Po prostu dodałem HEAD method i kliknąłem saved i zaczęło działać.

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

To jest prosty sposób, aby to zadziałało. Wiem, że to stare pytanie, ale wciąż trudno znaleźć rozwiązanie.

Na początek, to działało dla mnie przy projekcie zbudowanym z Rails 4, Paperclip 4, CamanJS, Heroku i AWS S3.

Musisz poprosić o zdjęcie używając parametru crossorigin: "anonymous".

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

Dodaj adres URL swojej strony do CORS w AWS S3. [[17]}tutaj jest odzew z Amazon na ten temat. Prawie, wystarczy przejść do wiadra, a następnie wybrać " Properties" z zakładek po prawej stronie otwórz zakładkę "uprawnienia, a następnie kliknij " Edytuj konfigurację Kors ".

Początkowo miałem < AllowedOrigin> ustawione na *. Po prostu zmień gwiazdkę na swój adres URL, pamiętaj, aby dołączyć opcje takie jak http:// i https:// w oddzielnych wierszach. Spodziewałem się, że gwiazdka akceptuje "wszystko", ale najwyraźniej musimy być bardziej konkretni.

Tak to wygląda dla mnie.

Jeśli twoje żądanie nie określa nagłówka Origin, S3 nie uwzględni nagłówków CORS w odpowiedzi. To naprawdę mnie rzuciło, ponieważ próbowałem zwijać pliki, aby przetestować CORS, ale curl nie zawiera Origin.

Patrz powyżej odpowiedzi. (ale też miałem Chrome Buga)

Nie ładuj i nie wyświetlaj obrazu na stronie w CHROME. (jeśli zamierzasz później utworzyć nową instancję)

W moim przypadku załadowałem obrazy i wyświetliłem je na stronie. Po kliknięciu utworzyłem ich nową instancję:

// 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 miał już buforowaną inną wersję i nigdy nie próbował ponownie pobrać wersji crossorigin (nawet jeśli używałem crossorigin na wyświetlonych obrazach.

Aby naprawić, dodałem ?crossorigin do koniec URL obrazu (ale można dodać ?blah, to tylko dowolne, aby zmienić stan pamięci podręcznej), gdy załadowałem go do canvas.. Daj mi znać, jeśli znajdziesz lepszą poprawkę dla CHROME

Dodam tylko do tę odpowiedź - powyżej - która rozwiązała mój problem.

Aby ustawić AWS / CloudFront Distribution Point do przekierowania nagłówka Cors Origin, kliknij w interfejs edycji dla punktu dystrybucji:

Przejdź do zakładki zachowania i edytuj zachowanie, zmieniając nagłówki białej listy z BRAK na Białą, a następnie upewnij się, że {[0] } jest dodany do białej listy.

Miałem podobne problemy z załadowaniem modeli 3D z S3 do przeglądarki 3D javascript (3D HOP), ale o dziwo tylko z pewnymi typami plików (.nxs).

To co naprawiłem dla mnie to zmiana AllowedHeader z domyślnego Authorization na * w 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>

1. Ustaw konfigurację Kors w Ustawieniach uprawnień dla Twojego wiadra 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 dodaje nagłówki CORS tylko wtedy, gdy żądanie http ma nagłówek Origin.

3. CloudFront nie wykonuje forward Origin header domyślnie

   Musisz dodać nagłówek Origin do białej listy w Ustawieniach zachowania dla twojej dystrybucji CloudFront.

Naprawiłem to pisząc:

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

Dlaczego <AllowedHeader>*</AllowedHeader> działa, a <AllowedHeader>Authorization</AllowedHeader> nie?

Próbowałem wszystkich powyższych odpowiedzi i nic nie działało. W rzeczywistości potrzebujemy 3 kroków z powyższych odpowiedzi razem, aby to działało:

1. Zgodnie z sugestią Flavio; Dodaj konfigurację CORS na wiadrze:

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

2. Na obrazku; wymień crossorigin:

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

3. Używasz CDN? Jeśli wszystko działa dobrze łącząc się z serwerem origin, ale nie przez CDN; oznacza to, że potrzebujesz pewnych ustawień na CDN, takich jak nagłówki accept CORS. Dokładne ustawienie zależy od tego, który CDN bierzesz.

Dotarłem do tego wątku i Żadne z powyższych rozwiązań nie znalazło zastosowania w moim przypadku. Okazało się, że po prostu musiałem usunąć końcowy ukośnik w konfiguracji Kors mojego wiadra.

:

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

Wygrane:

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

Fwuensche "answer" jest corret do skonfigurowania CDN; robiąc to, usunąłem MaxAgeSeconds.

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

W najnowszej konsoli zarządzania S3, po kliknięciu konfiguracji CORS na karcie Uprawnienia, wyświetli się domyślna przykładowa konfiguracja CORS. Ta konfiguracja nie jest jednak aktywna! Musisz najpierw kliknąć Zapisz, aby aktywować CORS.

Zajęło mi zbyt długo, aby to rozgryźć, mam nadzieję, że to zaoszczędzi komuś trochę czasu.