Condivisione di risorse cross-origine S3 Non funziona

Question

Sto tentando di utilizzare blur.js per sfocare le immagini caricate dall'utente e sto memorizzando le immagini su Amazon S3. Ho installato quello che penso di essere la configurazione CORS corretto, ma le immagini non possono essere offuscata e ottengo questo errore nel browser:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. 

Ecco la mia 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> 
    <AllowedMethod>POST</AllowedMethod> 
    <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
    </CORSConfiguration> 

Qualche idea di cosa c'è che non va?

Answer 1

Ho il sospetto che non si stia utilizzando il formato dell'indirizzo dell'endpoint S3 corretto richiesto per il supporto CORS.

cioè S3 secchi supportano entrambi questi formati:

1. http://bucket.s3.amazonaws.com/object
2. http://s3.amazonaws.com/bucket/object

Ma solo il primo URL funzionerà con CORS secondo il documentation:

con CORS, puoi configurare il tuo bucket in modo esplicito È possibile abilitare richieste incrociate da website.s3-website-us-east-1.amazonaws.com.

Answer 2

L'ho appena fatto. Fondamentalmente, puoi seguire i passaggi per modificare i permessi del bucket S3 e far funzionare. Se hai bisogno di ulteriore aiuto, lascia un commento sotto.

1) Accedi alla console AWS Gestione e aprire la console di Amazon S3 a https://console.aws.amazon.com/s3/

2) Nell'elenco Benne, aprire il secchio di cui si desidera visualizzare e fare clic su "aggiungi configurazione CORS"

3) Scrivere le regole si è disposti a aggiungere tra i tag <CORSConfiguration>

<CORSConfiguration> 
    <CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Si può imparare di più su regole a: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

4) Specificare crossorigin = 'anonymous' sull'immagine che verrà utilizzato nella vostra tela