S3 – Intestazione di controllo dell’accesso-authorization-origine

Qualcuno è riuscito ad aggiungere Access-Control-Allow-Origin agli header di risposta? Quello di cui ho bisogno è qualcosa del genere:

  

Questa richiesta di ricezione dovrebbe contenere nella risposta, intestazione, Access-Control-Allow-Origin: *

Le mie impostazioni CORS per il bucket assomigliano a questo:

    * GET 3000 *   

Come puoi immaginare, non esiste un’intestazione di risposta Origin .

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

amazon-screen-shot

viene fornito con alcuni valori predefiniti. Questo è tutto ciò di cui avevo bisogno per risolvere il tuo problema. Basta fare clic su “Salva” e riprovare per vedere se ha funzionato. Se così non fosse, potresti anche provare il codice seguente (da alxrb answer) che sembra aver funzionato per la maggior parte delle persone.

    * GET HEAD 3000 Authorization   

Per ulteriori informazioni, è ansible leggere questo articolo su Modifica authorization Bucket .

Stavo riscontrando un problema simile con il caricamento dei caratteri web, quando ho fatto clic su “aggiungi configurazione CORS”, nelle proprietà del bucket, questo codice era già presente:

    * GET HEAD 3000 Authorization   

Ho appena cliccato su save e ha funzionato, i miei font web personalizzati sono stati caricati in IE e Firefox. Non sono esperto in questo, ho solo pensato che questo potesse aiutarti.

@jordanstephens ha detto questo in un commento, ma si è perso ed è stato una soluzione davvero facile per me.

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

   * GET HEAD  3000 Authorization   

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 su un progetto realizzato con Rails 4, Paperclip 4, CamanJS, Heroku e AWS S3.


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

   

Aggiungi l’URL del tuo sito a CORS in AWS S3. Ecco un riferimento da Amazon su questo. Praticamente, vai nel tuo secchio, quindi seleziona ” Proprietà ” dalle tabs a destra, apri la scheda ” Autorizzazioni ” e poi fai clic su ” Modifica configurazione CORS “.

Inizialmente avevo < AllowedOrigin> impostato su * . Basta cambiare l’asterisco al tuo URL, assicurati di includere opzioni come http:// e https:// in righe separate. Mi aspettavo che l’asterisco accetti “Tutto”, ma a quanto pare dobbiamo essere più specifici di così.

Ecco come mi cerca.

inserisci la descrizione dell'immagine qui

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

Vedi sopra le risposte. (ma ho avuto anche un bug cromato)

Non caricare e visualizzare l’immagine sulla pagina in CHROME. (se in seguito creerai una nuova istanza)

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

 // there is already an html  on the page, I'm creating a new one now img = $('')[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 ha già memorizzato nella cache un’altra versione e non ha MAI cercato di recuperare la versione crossorigin (anche se stavo usando il crossorigin sulle immagini visualizzate.

Per correggere, ho aggiunto ?crossorigin alla fine ?crossorigin dell’immagine (ma potresti aggiungere ?blah , è arbitrario cambiare lo stato della cache) quando lo ho caricato per la canvas. Fammi sapere se trovi una soluzione migliore per CHROME

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

Per impostare AWS / CloudFront Distribution Point su Torward Origin Header CORS, fai clic sull’interfaccia di modifica per il punto di distribuzione:

inserisci la descrizione dell'immagine qui

Vai alla scheda Comportamenti e modifica il comportamento, modificando le intestazioni Whitelist da Nessuna a Whitelist, quindi assicurati che Origin sia aggiunto alla casella bianca.

inserisci la descrizione dell'immagine qui

Stavo riscontrando problemi simili nel caricare i modelli 3D da S3 in un visualizzatore 3D javascript (3D HOP), ma stranamente solo con determinati tipi di file (.nxs).

Quello che per me è stato risolto è stato il cambio di AllowedHeader predefinita a * nella configurazione di CORS:

    * GET 3000 *   
  1. Imposta la configurazione CORS in Impostazioni autorizzazioni per il tuo bucket S3

        * GET 3000 Authorization   
  2. S3 aggiunge le intestazioni CORS solo quando la richiesta http ha l’intestazione Origin .

  3. CloudFront non inoltra l’intestazione Origin per impostazione predefinita

    Devi inserire nella whitelist l’intestazione Origin nelle impostazioni di comportamento per la tua distribuzione CloudFront.

L’ho risolto scrivendo quanto segue:

    * GET 3000 *   

Perché * funziona e Authorization no?

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

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

       * GET   
  2. Sull’immagine; menziona crossorigin:

      
  3. Stai usando un CDN? Se tutto funziona correttamente connettendosi al server di origine ma NON tramite CDN; significa che hai bisogno di qualche impostazione sul tuo 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 precedenti si è rivelata applicabile al mio caso. A quanto pare, ho semplicemente dovuto rimuovere una barra finale nella configurazione CORS del mio bucket.

Non riesce:

    http://www.mywebsite.com/ GET 3000 *   

vittorie:

    http://www.mywebsite.com GET 3000 *   

Spero che questo salvi qualcuno che tiri i capelli.

fwuensche “answer” è corret per impostare un CDN; facendo questo, ho rimosso MaxAgeSeconds.

  * GET Authorization  

Nell’ultima S3 Management Console, quando fai clic sulla configurazione CORS nella scheda Autorizzazioni, verrà mostrata una configurazione CORS di esempio predefinita. Questa configurazione non è effettivamente triggers, tuttavia! Devi prima fare clic su Salva per triggersre CORS.

Mi ci è voluto troppo tempo per capirlo, spero che questo salvi qualcuno prima o poi.