Si vous diffusez du contenu statique directement depuis Amazon S3 via CloudFront (CDN), vous avez probablement rencontre des erreurs concernant les polices, images ou autres contenus statiques a delivrer a vos utilisateurs. En realite, ce n'est pas complique. Vous pouvez corriger ce probleme dans les parametres CORS de votre bucket Amazon S3.

Qu'est-ce que Amazon S3 CORS ?

Cross Origin Resource Sharing (dit CORS). La specification CORS vous donne la possibilite de creer des applications web qui font des requetes vers des domaines autres que celui qui a fourni le contenu principal.

Etape 1 : Ouvrez les parametres de Permission de votre Bucket sur la Console Web AWS

Visitez https://s3.console.aws.amazon.com et connectez-vous avec vos identifiants a la console S3, puis selectionnez votre bucket qui est connecte a votre CloudFront.

Etape 2 : Appliquer la Configuration CORS

Dans l'onglet Permissions, vous pouvez voir la section "CORS configuration". Selectionnez cette section et appliquez le code ci-dessous :

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

Apres avoir colle, remplacez <AllowedOrigin></AllowedOrigin> par l'adresse de votre site web et cliquez sur le bouton "Save".

Conclusion

Hourra ! Vous avez maintenant configure vos parametres CORS avec succes et vos utilisateurs peuvent desormais voir le contenu situe dans votre bucket Amazon S3.