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

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.

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

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

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.

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.

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

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.

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

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:

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.

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>

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

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.

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.

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.

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?

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

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.

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>

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!

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

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>

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

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

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", "*");

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