Isso é um pouco mais complicado do que a resposta aceita indica.
O suporte ao CORS ao usar o Cloudfront + S3 é realmente implementado no S3 e funciona assim de acordo com a Amazon:
O cabeçalho Origin da solicitação deve corresponder a um elemento AllowedOrigin.
O método de solicitação (por exemplo, GET ou PUT) ou o cabeçalho Método de solicitação de controle de acesso no caso de uma solicitação OPTIONS de comprovação deve ser um dos elementos AllowedMethod.
Todo cabeçalho listado no cabeçalho da solicitação de controle de acesso da solicitação na solicitação de comprovação deve corresponder a um elemento AllowedHeader.
Isso faz sentido, o que pode não ficar claro é que, se nenhum cabeçalho Origin for enviado pelo cliente, esse processamento não será feito. E estamos usando o Cloudfront na frente que, se você estiver hospedando apenas recursos estáticos, provavelmente o configurou para ignorar todos os cabeçalhos durante o cache. Portanto, se a primeira solicitação para cada arquivo de um nó de borda específico não incluir o cabeçalho Origin, ele armazenará em cache a resposta sem o cabeçalho Access-Control-Allow-Origin.
O resultado é que a primeira solicitação recebida determinará quais cabeçalhos serão retornados para todas as solicitações até que o cache expire.
Existem várias maneiras de corrigir / solucionar isso.
- Configure o cloudfront para fazer cache condicional com base no cabeçalho "Origem".
Isso funciona bem se você espera apenas algumas ou uma única origem, mas, caso contrário, sua taxa de cache pode ficar muito ruim.
- Use o Lambda @ edge para definir forçosamente os cabeçalhos, isso pode ser feito apenas uma vez para cada solicitação de origem (S3).
Totalmente flexível, mas adiciona custos indiretos e custos.
- Faça com que o cloudfront substitua o cabeçalho "Origem" por um valor fictício para cada solicitação.
Isso é realmente útil apenas no caso "Access-Control-Allow-Origin: *" e é um pouco complicado, mas provavelmente é a melhor solução atual ao hospedar ativos estáticos no cloudfront + S3.