Se voce esta servindo conteudo estatico diretamente do Amazon S3 via CloudFront (CDN), provavelmente vai receber um erro sobre fontes, imagens ou outros conteudos estaticos ao entrega-los para seus usuarios. Na verdade, nao e complicado. Voce pode corrigir esse problema nas configuracoes de CORS do seu Bucket Amazon S3.

O que e CORS do Amazon S3?

Cross Origin Resource Sharing (tambem conhecido como CORS). A especificacao CORS oferece a capacidade de construir aplicacoes web que fazem requisicoes para dominios diferentes daquele que forneceu o conteudo principal.

Passo 1: Abra as configuracoes de Permissao do seu Bucket no Console Web da AWS

Visite a pagina https://s3.console.aws.amazon.com e faca login com suas credenciais no console do S3. Em seguida, selecione o bucket que esta conectado ao seu CloudFront.

Passo 2: Aplique a Configuracao CORS

Na aba Permissions (Permissoes), voce encontrara a secao "CORS configuration". Selecione esta secao e aplique o codigo abaixo:

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

Apos colar, altere o <AllowedOrigin></AllowedOrigin> com o endereco do seu site e clique no botao "Save".

Conclusao

Pronto! Agora voce configurou com sucesso suas definicoes de CORS e seus usuarios ja podem visualizar o conteudo localizado no seu Bucket Amazon S3.