S3 - Nagłówek All-Control-Allow-Origin

187

Czy ktoś zdołał dodać Access-Control-Allow-Origindo nagłówków odpowiedzi? Potrzebuję czegoś takiego:

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

To żądanie get powinno zawierać w odpowiedzi nagłówek, Access-Control-Allow-Origin: *

Moje ustawienia CORS dla segmentu wyglądają następująco:

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

Jak można się spodziewać, nie ma Originnagłówka odpowiedzi.

Wowzaaa
źródło
4
Możliwy duplikat stackoverflow.com/questions/17570100/…
Kevin Borders
1
Jednej rzeczy brakuje w tym: <ExposeHeader> Kontrola dostępu-Allow-Origin </ExposeHeader>
Dimitry

Odpowiedzi:

198

Zwykle wszystko, co musisz zrobić, to „Dodaj konfigurację CORS” we właściwościach segmentu.

amazon-zrzut ekranu

<CORSConfiguration>Przychodzi z jakimiś wartościami domyślnymi. To wszystko, czego potrzebowałem, aby rozwiązać twój problem. Po prostu kliknij „Zapisz” i spróbuj ponownie, aby sprawdzić, czy zadziałało. Jeśli tak się nie stanie, możesz również wypróbować poniższy kod (z odpowiedzi na alxrb), który wydaje się działać dla większości ludzi.

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

Aby uzyskać więcej informacji, zapoznaj się z tym artykułem na temat edytowania uprawnień segmentu .

Flavio Wuensche
źródło
4
Wydaje się to możliwe. Spróbuj przeczytać powyższy link (w odpowiedzi) lub przejdź bezpośrednio do tego: docs.aws.amazon.com/AmazonS3/latest/API/RESTBucketPUTcors.html
Flavio Wuensche
7
Dziękuję Ci. Wystarczy kliknąć Zapisz, aby załadować moje czcionki.
Tania Rascia
2
Zauważyłem, że czasami działa, a innym razem po edycji nadal pojawia się błąd przeglądarki. Nie jestem pewien, czy jest to CloudFlare czy S3.
Mark
4
Być może trzeba będzie dodać HEADdo AllowedMethods
jordanstephens
32
Nie działa dla mnie. Nadal nie ma nagłówka „Access-Control-Allow-Origin” w odpowiedzi na żądania HEAD lub GET.
carpiediem
104

Miałem podobny problem z ładowaniem czcionek internetowych, kiedy kliknąłem „dodaj konfigurację CORS”, we właściwościach segmentu 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> 

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

alxrb
źródło
12
Dzięki! Zrobiło to dla mnie. Dotarłem aż do kliknięcia „dodaj konfigurację CORS”, ale nie zdawałem sobie sprawy, że muszę kliknąć „zapisz”, ponieważ myślałem, że patrzę na domyślną konfigurację. Nie.
Jack Cushman
35
Musiałem ustawić, <AllowedHeader>*</AllowedHeader>aby to działało (lepiej, aby przy tej okazji wprowadzić nową zasadę dla swojej witryny)
parlament
4
@parlament miał magię, ponieważ wszystkie inne powyższe ustawienia nie działały, dopóki <AllowedHeader> nie został ustawiony na symbol wieloznaczny. Hurra.
Neal Magee,
Poszedłem do ustawień CORS i znalazłem tam te same ustawienia, ale <AllowedOrigin> * </AllowedOrigin> stało się aktywne, kiedy kliknąłem save. Nie było wcześniej.
dvdmn
1
To było to, kliknij Zapisz
lapinkoira
48

Jeśli twoje żądanie nie określa Originnagłówka, 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 obejmuje Origin.

eremzeit
źródło
2
szukałem w Internecie od 2 tygodni, wszystkie artykuły i odpowiedzi mówiły o zmianie konfiguracji S3 CORS, co zrobiłem tak, jak powiedzieli, ale żadnych zmian w odpowiedzi, dopóki nie zobaczyłem twojej odpowiedzi, to ma dla mnie sens, przetestowałem ją za pomocą listonosz i jego działanie! więc bardzo dziękuję
Abdallah Awwad Alkhwaldah
1
Czy ktoś wie, jak mogę zmienić nagłówki imgtagu? Nie mogę wysyłać różnych nagłówków, przeglądarka wysyła żądanie
idan
1
OMG, czy jest to gdziekolwiek udokumentowane?
Darkowic
2
To jest :) docs.aws.amazon.com/AmazonS3/latest/dev/… > Sprawdź, czy żądanie ma nagłówek Origin. Jeśli nagłówka brakuje, Amazon S3 nie traktuje żądania jako żądania pochodzącego z innego źródła, i nie wysyła nagłówków odpowiedzi CORS w odpowiedzi.
Darkowic
46

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

Po prostu dodałem metodę HEAD i kliknąłem zapisaną 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>

Senica Gonzalez
źródło
3
to działa od 17 stycznia 2018 r., przyjęta odpowiedź jest hańbą. lol
lasec0203
4
Tak. To naprawia błąd „Brak nagłówka„ Kontrola dostępu - Zezwalaj na pochodzenie ”” w Chrome podczas pobierania rzeczy takich jak czcionki z AWS S3.
Nostalg.io
1
Tak! Dziękuję bardzo. HEADMetoda zezwalająca załatwiła sprawę.
Zac
37

Jest to prosty sposób, aby to zadziałało.

Wiem, że to stare pytanie, ale wciąż trudno jest znaleźć rozwiązanie.

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


Musisz zażądać obrazu za pomocą crossorigin: "anonymous"parametru.

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

Dodaj adres URL swojej witryny do CORS w AWS S3. Oto informacje na ten temat od Amazon. Prawie, po prostu przejdź do wiadra, a następnie wybierz „ Właściwości ” z kart po prawej stronie, otwórz „ kartę Uprawnienia , a następnie kliknij„ Edytuj konfigurację CORS ”.

Pierwotnie < AllowedOrigin>ustawiłem *. Po prostu zmień gwiazdkę na adres URL, pamiętaj o dołączeniu opcji takich jak http://i https://w osobnych wierszach. Spodziewałem się, że gwiazdka akceptuje „Wszystko”, ale najwyraźniej musimy być bardziej szczegółowi.

Tak to dla mnie wygląda.

wprowadź opis zdjęcia tutaj

Horacio
źródło
1
w przeciwieństwie do przyjętej odpowiedzi, to faktycznie działa! Nawet ClaudFront CDN ładujący ten S3 replikuje te nagłówki. Dziękuję koleś Uratował mi kilka godzin!
ekwiwalent8
5
Jeśli korzystasz z CloudFront, możesz także przyjrzeć się temu - blog.celingest.com/en/2014/10/02/...
Kunal
1
Dzięki linkowi @ Kunal. CloudFront dodaje warstwę złożoności do tego równania.
Tyler Collier
1
Dotarłem do doktryny MDN <img>, ale crossOrigin="true"pomyliłem się. DZIĘKUJĘ CI!
Cezille07
Wow, to naprawdę załatwiło sprawę! Jestem w stanie używać go na localhost i mogę nawet użyć gwiazdki, kluczem było po prostu dodać crossorigin = "anonimowy" do mojego elementu HTML: D
Alexander
23

Zobacz powyższe odpowiedzi. (ale miałem też chromowany błąd)

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 ich 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 już buforował inną wersję i NIGDY nie próbował ponownie pobrać crossoriginwersji (nawet jeśli korzystałem crossoriginz wyświetlanych obrazów).

Aby to naprawić, dodałem ?crossoriginna końcu adresu URL obrazu (ale możesz dodać ?blah, zmiana stanu pamięci podręcznej jest po prostu arbitralna), gdy załadowałem go na płótno. Daj mi znać, jeśli znajdziesz lepszą poprawkę dla CHROME

Funkodebat
źródło
5
Problemem okazało się również buforowanie (po wypróbowaniu zaakceptowanych odpowiedzi). Dzięki za to.
FearMediocrity,
Miałem także problem z pamięcią podręczną w Chrome. Łatwa naprawa: Narzędzia / Ustawienia> Wyczyść dane przeglądania ...> Obrazy i pliki z pamięci podręcznej Chociaż dla użytkowników, którzy mogą napotkać ten problem, może być wymagane inne rozwiązanie.
StevieP,
1
Dzięki za tę odpowiedź! Miałem ten sam problem z Chrome i nie znalazłem odpowiedzi.
Wandrille
1
Wszyscy ludzie muszą tego spróbować, jeśli mają problemy z CORS !! Ratuj mój dzień!
Sangar82,
23

Dodam tylko do tej odpowiedzi - powyżej - która rozwiązała mój problem.

Aby ustawić punkt dystrybucji AWS / CloudFront, aby torward nagłówek początkowy CORS, kliknij interfejs edycji punktu dystrybucji:

wprowadź opis zdjęcia tutaj

Przejdź na kartę zachowania i edytuj zachowanie, zmieniając „Pamięć podręczna na podstawie wybranych nagłówków żądań” z Brak na Biała Originlista , a następnie upewnij się, że została dodana do pola białej listy. Aby uzyskać więcej informacji, zobacz Konfigurowanie CloudFront w celu przestrzegania ustawień CORS w Dokumentach AWS.

wprowadź opis zdjęcia tutaj

MikeiLL
źródło
Jakie dozwolone metody HTTP należy ustawić?
Uczeń
Masz na myśli GET, POST, DELETE itp.? Gdzie są proszeni?
MikeiLL,
Czy możesz ponownie sformułować swoje pytanie, abym mógł zrozumieć, czy masz do czynienia z formularzem internetowym cf, czy aplikacją, która jest proszona o zasób s3? Jeśli to pierwsze, istnieje opcja metod HTTP, która jest wymieniona w dokumentach tutaj docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/…
Learner
Wygląda na to, że pytałeś, co HTTP Request Methodsnależy ustawić w AWS. I na to pytanie nie widzę potrzeby ustawiania w dowolnym miejscu. Jeśli mówisz w aplikacji, która żąda zasobu, uważam, że poprosiłbyś o plik po nim url string: tj. Obraz, wideo, plik audio.
MikeiLL,
To był brakujący kawałek! Dziękuję Ci! Próbowałem wszystkich odpowiedzi powyżej i tylko po dodaniu do białej listy tych nagłówków zadziałało dla mnie na localhost
Omer Leshem
11

Miałem podobne problemy z ładowaniem modeli 3D z S3 do javascript 3D viewer (3D HOP), ale o dziwo tylko w przypadku niektórych typów plików (.nxs).

Naprawiłem to, zmieniając AllowedHeaderz domyślnego Authorizationna *konfigurację 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>
żyły
źródło
3
<AllowedHeader>*</AllowedHeader>W październiku 2017 r. Musiałem tak ustawić gwiazdkę dla Chrome. Dziękuję bardzo! (Nie zapomnij również wyczyścić pamięci podręcznej przeglądarki po ustawieniu).
Nostalg.io
Mały punkt - nie sądzę, że musisz zmienić AllowedHeader. Miałem również ten sam problem, ale okazało się, że przeglądarka buforowała poprzednią odpowiedź ( MaxAgeSeconds). W Ustawieniach DevTools możesz zignorować pamięć podręczną, gdy konsola jest otwarta. Kiedy to zrobiono, zaczęło działać dla mnie
divillysausages
AllowedHeader> * <zdecydowanie naprawił ten problem dla mnie. Może mieć zastosowanie tylko wtedy, gdy żądanie jest wysyłane za pośrednictwem konkretnej biblioteki xhr? Używam Axios i uznałem to za konieczne.
Jeremy
6

Podobnie jak inne mają stany, najpierw musisz mieć konfigurację CORS w swoim segmencie S3:

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

Ale w moim przypadku po wykonaniu tej czynności nadal nie działało. Korzystałem z Chrome (prawdopodobnie ten sam problem z innymi przeglądarkami).

Problem polegał na tym, że Chrome buforował obraz z nagłówkami (niezawierającymi danych CORS) , więc bez względu na to, co próbowałem zmienić w AWS, nie widziałem moich nagłówków CORS.

Po wyczyszczeniu pamięci podręcznej Chrome i ponownym załadowaniu strony obraz miał oczekiwane nagłówki CORS

Tonio
źródło
1
Dziękuję Ci! Ten problem z pamięcią podręczną doprowadzał mnie do szaleństwa. Jeśli zastanawiasz się, jak łatwo wyczyścić pamięć podręczną w przeglądarce Chrome (wersja 73), kliknij prawym przyciskiem myszy przycisk przeładowania i wybierz opcję „Opróżnij pamięć podręczną i przeładuj ponownie”. Następnie zobaczysz efekt wszelkich zmian wprowadzonych w S3 CORS w ciągu <5 sekund. (Może szybciej - tyle czasu zajmuje mi zmiana kart przeglądarki).
Thu
1
TO był mój problem. Moje wiadro miało odpowiednią konfigurację CORS, moja przeglądarka była po prostu cudownie wydajna 🤪Dziękuję.
Daniel Brady
5

Próbowałem wszystkich powyższych odpowiedzi i nic nie działało. Właściwie potrzebujemy 3 kroków od powyższych odpowiedzi, aby zadziałało:

  1. Jak sugeruje Flavio; dodaj konfigurację CORS do swojego segmentu:

    <CORSConfiguration>
       <CORSRule>
         <AllowedOrigin>*</AllowedOrigin>
         <AllowedMethod>GET</AllowedMethod>
       </CORSRule>
     </CORSConfiguration>
    
  2. Na obrazie; wspomnieć crossorigin:

    <img href="abc.jpg" crossorigin="anonymous">
    
  3. Czy używasz CDN? Jeśli wszystko działa poprawnie, połączenie z serwerem pochodzenia, ale NIE przez CDN; oznacza to, że potrzebujesz pewnych ustawień w sieci CDN, takich jak akceptacja nagłówków CORS. Dokładne ustawienie zależy od używanego CDN.

Deepak Singhal
źródło
Dzięki temu część CDN jest bardzo ważna, czy możesz dodać szczegóły tego, co jest potrzebne na poziomie CDN?
svelandiag
5

Doszedłem do tego wątku i żadne z powyższych rozwiązań nie okazało się mieć zastosowanie w mojej sprawie. Okazuje się, że po prostu musiałem usunąć ukośnik z <AllowedOrigin>adresu URL w konfiguracji CORS mojego segmentu.

Nie działa:

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

Wygrywa:

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

Mam nadzieję, że uratuje to komuś pociągnięcie za włosy.

Charney Kaye
źródło
3
  1. Ustaw konfigurację CORS w ustawieniach uprawnień dla swojego segmentu 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 Originnagłówek.

  3. CloudFront domyślnie nie przekazuje Originnagłówka

    Musisz umieścić Originnagłówek na białej liście w ustawieniach zachowania dla swojej dystrybucji CloudFront.

Paweł Furmaniak
źródło
2

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?

Pablo García Miranda
źródło
1

„odpowiedź” fwuensche jest słuszna do założenia CDN; robiąc to, usunąłem MaxAgeSeconds.

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
Mich. Gio.
źródło
1

W najnowszej konsoli zarządzania S3 kliknięcie konfiguracji CORS na karcie Uprawnienia spowoduje wyświetlenie domyślnej przykładowej konfiguracji CORS. Ta konfiguracja nie jest jednak aktywna! Musisz najpierw kliknąć Zapisz, aby aktywować CORS.

Zbyt długo mi to zajęło, mam nadzieję, że to pozwoli komuś zaoszczędzić trochę czasu.

hackel
źródło
1

Ta konfiguracja rozwiązała dla mnie problem:

<?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>
DIWAKAR
źródło
Widzę bardzo małą różnicę między tą konfiguracją a konfiguracjami wielu innych odpowiedzi w tym pytaniu. Czy podjęto próbę użycia konfiguracji starszych odpowiedzi przed opublikowaniem tej konfiguracji?
entpnerd
1

Ostrzeżenie - włamanie.

Jeśli użyjesz S3Image do wyświetlenia obrazu, a następnie spróbujesz go pobrać przez pobranie, być może wstawisz go do pliku PDF lub wykonasz inne przetwarzanie, pamiętaj, że Chrome zbuforuje pierwszy wynik, który nie wymaga żądania wstępnej inspekcji CORS, oraz następnie spróbuj uzyskać ten sam zasób bez żądania OPCJI wstępnego pobierania i nie powiedzie się z powodu ograniczeń przeglądarki.

Innym sposobem obejścia tego jest upewnienie się, że S3Image zawiera crossorigin: „poświadczenia użycia”, jak wspomniano powyżej. W pliku, którego używasz S3Image (mam komponent, który tworzy buforowaną wersję S3Image, więc jest to dla mnie idealne miejsce), przesłoń prototypową metodę imageEl S3Image, aby wymusić włączenie tego atrybutu.

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 })));
};

Problem 403 został już rozwiązany. Co za ból!

Philip Murphy
źródło
1
<AllowedOrigin>*</AllowedOrigin>

nie jest dobrym pomysłem, ponieważ * pozwalasz dowolnej witrynie uzyskać dostęp do plików w swoim segmencie. Zamiast tego należy określić, które pochodzenie jest dokładnie dozwolone do korzystania z zasobów z wiadra. Zazwyczaj jest to nazwa Twojej domeny

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

lub jeśli chcesz uwzględnić wszystkie możliwe subdomeny:

<AllowedOrigin>*.example.com</AllowedOrigin>
Rudolf B.
źródło
1

Poniżej znajduje się konfiguracja i dla mnie dobrze działa. Mam nadzieję, że pomoże to rozwiązać Twój problem z 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>
Gaurang Sondagar
źródło
Na początku zadziałało, a potem zaostrzyłem zabezpieczenia, usuwając niepotrzebne metody i podając je tylko takim nagłówkom, których chciałem
hit
0

Przyjęta odpowiedź działa, ale wydaje się, że jeśli przejdziesz bezpośrednio do zasobu, nie będzie żadnych nagłówków krzyżowych. Jeśli korzystasz z Cloudfront, spowoduje to, że Cloudfront zbuforuje wersję bez nagłówków. Gdy przejdziesz do innego adresu URL, który ładuje ten zasób, pojawi się problem krzyżowania źródeł.

TigerBear
źródło
0

Jeśli twoje ustawienia CORS ci nie pomogą.

Sprawdź, czy konfiguracja S3 jest poprawna. Miałem niepoprawną nazwę wiadra w Storage.configure. Użyłem krótkiej nazwy segmentu, co spowodowało błąd:

Żądany zasób nie zawiera nagłówka „Access-Control-Allow-Origin”.

Alexander
źródło
0

Najpierw aktywuj CORS w swoim segmencie S3. Użyj tego kodu jako wskazówki:

<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) Jeśli nadal nie działa, dodaj również tag „crossorigin” o wartości „*” do tagów img. Umieść to w pliku HTML:

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");
Christian Saavedra
źródło
-1

Co do tego, co jest warte, miałem podobny problem - podczas próby dodania określonego dozwolonego źródła (nie *).

Okazuje się, że musiałem poprawić

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

do

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

(zwróć uwagę na ostatniego slaha w adresie URL)

Mam nadzieję, że to komuś pomoże

Yossi Vainshtein
źródło