S3 - Intestazione Access-Control-Allow-Origin

Qualcuno è riuscito ad aggiungere Access-Control-Allow-Origin alle intestazioni di risposta? Ciò di cui ho bisogno è qualcosa del genere:

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

Questa richiesta get deve contenere nella risposta, intestazione, Access-Control-Allow-Origin: *

Le mie impostazioni CORS per il bucket si presentano così:

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

Come prevedibile, non esiste Originun'intestazione di risposta.

Di solito, tutto ciò che devi fare è "Aggiungi configurazione CORS" nelle proprietà del bucket.

Il <CORSConfiguration>è dotato di alcuni valori di default. Questo è tutto ciò di cui avevo bisogno per risolvere il tuo problema. Fai clic su "Salva" e riprova per vedere se ha funzionato. In caso contrario, puoi anche provare il codice seguente (dalla risposta di alxrb) che sembra aver funzionato per la maggior parte delle persone.

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

Per ulteriori informazioni, puoi leggere questo articolo su Modifica autorizzazione benna .

Avevo un problema simile con il caricamento dei font web, quando ho cliccato su 'aggiungi configurazione CORS', nelle proprietà del bucket, questo codice era già lì:

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

Ho appena fatto clic su Salva e ha funzionato a meraviglia, i miei caratteri web personalizzati venivano caricati in IE e Firefox. Non sono un esperto in questo, ho pensato che potesse aiutarti.

Se la tua richiesta non specifica Originun'intestazione, S3 non includerà le intestazioni CORS nella risposta. Questo mi ha davvero colpito perché ho continuato a cercare di arricciare i file per testare il CORS ma l'arricciatura non include Origin.

@jordanstephens ha detto questo in un commento, ma si perde un po 'ed è stata una soluzione davvero facile per me.

Ho semplicemente aggiunto il metodo HEAD e fatto clic su salvato e ha iniziato a funzionare.

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

Questo è un modo semplice per farlo funzionare.

So che questa è una vecchia domanda, ma è ancora difficile trovare una soluzione.

Per iniziare, questo ha funzionato per me in un progetto realizzato con Rails 4, Paperclip 4, CamanJS, Heroku e AWS S3.

Devi richiedere la tua immagine usando il crossorigin: "anonymous"parametro

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

Aggiungi l'URL del tuo sito a CORS in AWS S3. Ecco un riferimento di Amazon a riguardo. Praticamente, basta andare al secchio, quindi selezionare " Proprietà " dalle schede a destra, aprire " Scheda Autorizzazioni e quindi fare clic su" Modifica configurazione CORS ".

Inizialmente, avevo < AllowedOrigin>impostato *. Cambia l'asterisco nel tuo URL, assicurati di includere opzioni come http://e https://in righe separate. Mi aspettavo che l'asterisco accettasse "Tutto", ma apparentemente dobbiamo essere più specifici di così.

Questo è come mi guarda.

Vedi le risposte sopra. (ma avevo anche un bug di Chrome)

Non caricare e visualizzare l'immagine sulla pagina in CHROME. (se hai intenzione di creare in seguito una nuova istanza)

Nel mio caso, ho caricato le immagini e le ho visualizzate sulla pagina. Quando sono stati cliccati, ne ho creato una nuova istanza:

// 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 aveva già memorizzato nella cache un'altra versione e MAI provato a recuperare nuovamente la crossoriginversione (anche se stavo usando crossoriginle immagini visualizzate.

Per risolvere, ho aggiunto ?crossoriginalla fine dell'URL dell'immagine (ma potresti aggiungere ?blah, è arbitrario cambiare lo stato della cache) quando l'ho caricato per canvas .. Fammi sapere se trovi una soluzione migliore per CHROME

Aggiungerò solo a questa risposta - sopra - che ha risolto il mio problema.

Per impostare il punto di distribuzione AWS / CloudFront in modo da modificare l'intestazione dell'origine CORS, fare clic nell'interfaccia di modifica per il punto di distribuzione:

Vai alla scheda comportamenti e modifica il comportamento, cambiando "Cache in base alle intestazioni di richiesta selezionate" da Nessuno a Lista Originbianca , quindi assicurati che sia aggiunto alla casella nella lista bianca. Per ulteriori informazioni, vedi Configurare CloudFront per rispettare le impostazioni CORS in AWS Docs.

Avevo problemi simili nel caricare modelli 3D da S3 in un visualizzatore 3D javascript (3D HOP), ma stranamente abbastanza solo con alcuni tipi di file (.nxs).

Ciò che l'ha risolto per me stava cambiando AllowedHeaderdal valore predefinito Authorizationa *nella configurazione 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>

Come altri hanno gli stati, devi prima avere la configurazione CORS nel tuo bucket S3:

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

Ma nel mio caso dopo averlo fatto, non funzionava ancora. Stavo usando Chrome (probabilmente lo stesso problema con altri browser).

Il problema era che Chrome stava memorizzando nella cache l'immagine con le intestazioni (non contenenti i dati CORS) , quindi, indipendentemente da ciò che ho provato a modificare in AWS, non vedevo le intestazioni CORS.

Dopo aver svuotato la cache di Chrome e ricaricato la pagina , l'immagine aveva le intestazioni CORS previste

Ho provato tutte le risposte sopra e niente ha funzionato. In realtà, abbiamo bisogno di 3 passaggi da sopra le risposte insieme per farlo funzionare:

1. Come suggerito da Flavio; aggiungi la configurazione CORS sul tuo bucket:

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

2. Sull'immagine; menzionare crossorigin:

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

3. Stai usando un CDN? Se tutto funziona correttamente connettendosi al server di origine ma NON tramite CDN; significa che hai bisogno di alcune impostazioni sulla tua CDN come accettare le intestazioni CORS. L'impostazione esatta dipende da quale CDN si sta utilizzando.

Sono arrivato a questo thread, e nessuna delle soluzioni di cui sopra si è rivelata applicabile al mio caso. Si scopre, ho semplicemente dovuto rimuovere una barra finale <AllowedOrigin>dall'URL nella configurazione CORS del mio bucket.

Non riesce:

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

vittorie:

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

Spero che questo salvi qualcuno che tira i capelli.

1. Imposta la configurazione CORS in Impostazioni autorizzazioni per il tuo bucket 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 aggiunge le intestazioni CORS solo quando la richiesta http ha l' Originintestazione.

3. CloudFront non inoltra l' Originintestazione per impostazione predefinita

   Devi Origininserire nella whitelist l' intestazione nelle impostazioni del comportamento per la tua distribuzione CloudFront.

L'ho corretto scrivendo quanto segue:

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

Perché <AllowedHeader>*</AllowedHeader>funziona e <AllowedHeader>Authorization</AllowedHeader>no?

fwuensche "risposta" è corretta per impostare un CDN; facendo questo, ho rimosso MaxAgeSeconds.

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

Nell'ultima console di gestione S3, quando si fa clic sulla configurazione CORS nella scheda Autorizzazioni, mostrerà una configurazione CORS di esempio predefinita. Questa configurazione non lo è effettivamente attiva, tuttavia! Devi prima fare clic su Salva per attivare CORS.

Mi ci è voluto troppo tempo per capirlo, spero che questo salverà qualcuno un po 'di tempo.

Questa configurazione ha risolto il problema per me:

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

Avvertenza - Hack.

Se usi S3Image per visualizzare un'immagine e successivamente cerchi di ottenerla tramite recupero, magari per inserirla in un PDF o eseguire qualche altra elaborazione, tieni presente che Chrome memorizzerà nella cache il primo risultato che non richiede una richiesta di preflight CORS e quindi prova a ottenere la stessa risorsa senza la richiesta OPTIONS di preflight per il recupero e non riuscirà a causa delle restrizioni del browser.

Un altro modo per aggirare questo problema è assicurarsi che S3Image includa crossorigin: 'use-credentials' come menzionato sopra. Nel file che usi S3Image, (ho un componente che crea una versione cache di S3Image, quindi è il posto perfetto per me), sovrascrivi il metodo prototipo imageEl di S3Image per forzarlo a includere questo attributo.

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

Il problema 403 è ora risolto. Che dolore aggrr!

<AllowedOrigin>*</AllowedOrigin>

non è una buona idea perché con * concedi a qualsiasi sito web l'accesso ai file nel tuo bucket. Invece, dovresti specificare quale origine è esattamente autorizzata a usare le risorse dal tuo bucket. Di solito, questo è il tuo nome di dominio simile

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

o se vuoi includere tutti i possibili sottodomini:

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

Di seguito è la configurazione e va bene per me lavorare. Spero che possa aiutarti a risolvere il tuo problema su 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>

Innanzitutto, attiva CORS nel tuo bucket S3. Usa questo codice come guida:

<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) Se ancora non funziona, assicurati di aggiungere anche un "crossorigin" con un valore "*" ai tag img. Metti questo nel tuo file html:

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

La risposta accettata funziona, ma sembra che se vai direttamente alla risorsa, non ci sono intestazioni di origine incrociata. Se si utilizza cloudfront, ciò farà sì che cloudfront memorizzi nella cache la versione senza intestazioni. Quando si passa a un URL diverso che carica questa risorsa, si verificherà questo problema di origine incrociata.

Se le impostazioni CORS non ti aiutano.

Verificare che la configurazione S3 sia corretta. Avevo un nome bucket non valido Storage.configure. Ho usato un breve nome di bucket e ha causato un errore:

Nessuna intestazione "Access-Control-Allow-Origin" è presente sulla risorsa richiesta.

Per quello che vale, ho avuto un problema simile - quando provavo ad aggiungere una specifica origine consentita (non *).

Si scopre che ho dovuto correggere

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

per

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

(notare l'ultimo slah nell'URL)

Spero che questo aiuti qualcuno