Se stai servendo contenuti statici direttamente da Amazon S3 tramite CloudFront (CDN), probabilmente incontrerai un errore relativo a font, immagini o altri contenuti statici da distribuire ai tuoi utenti. In realtà, non è complicato. Puoi risolvere questo problema nelle impostazioni CORS del tuo bucket Amazon S3.

Cos'è Amazon S3 CORS?

Cross Origin Resource Sharing (aka CORS). La specifica CORS ti dà la possibilità di creare applicazioni web che effettuano richieste a domini diversi da quello che ha fornito il contenuto principale.

Passo 1: Apri le Impostazioni dei Permessi del Bucket sulla Console Web AWS

Visita https://s3.console.aws.amazon.com e accedi con le tue credenziali alla console S3, quindi seleziona il bucket connesso al tuo CloudFront.

Passo 2: Applica la Configurazione CORS

Nella scheda Permissions, puoi vedere la sezione "CORS configuration". Seleziona questa sezione e applica il codice qui sotto:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://YOURWEBSITEADDRESS.com</AllowedOrigin>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Dopo aver incollato, modifica <AllowedOrigin></AllowedOrigin> con l'indirizzo del tuo sito e clicca il pulsante "Save".

Conclusione

Evviva! Ora hai configurato con successo le tue impostazioni CORS e i tuoi utenti possono visualizzare i contenuti situati nel tuo bucket Amazon S3.