Configurando o Access-Control-Allow-Origin on Cloudfront

Question

Estou tendo problemas para exibir recursos estáticos no Firefox usando o AWS Cloudfront.

O Chrome funciona perfeitamente, mas o Firefox está retornando um erro de CORS.

Se eu executar o curl, recebo:

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Content-Length: 39420
Connection: keep-alive
Date: Mon, 11 Aug 2014 21:53:50 GMT
Cache-Control: public, max-age=31557600
Expires: Sun, 09 Aug 2015 01:28:02 GMT
Last-Modified: Fri, 08 Aug 2014 19:28:05 GMT
ETag: "9df744bdf9372cf4cff87bb3e2d68fc8"
Accept-Ranges: bytes
Server: AmazonS3
Age: 2743
X-Cache: Hit from cloudfront
Via: 1.1 c445b20dfbf3128d810e975e5d84e2cd.cloudfront.net (CloudFront)
X-Amz-Cf-Id: ...

Qual eu acho que precisa do cabeçalho:

Access-Control-Allow-Origin: *

Alguém pode me ajudar? Por que isso é um problema no Firefox e não no Chrome? Como posso resolver isso?

    

Answer 1

Em primeiro lugar, você precisa ter certeza de que você whitelist cabeçalho de origem:

If you want CloudFront to respect cross-origin resource sharing settings, configure CloudFront to forward the Origin header to your origin.

link

Veja também: link

A propósito, existem várias questões similares em serverfault / stackoverflow e muitas respostas.

    

Answer 2

Isso é um pouco mais complicado do que a resposta aceita indica.

O suporte do CORS ao usar o Cloudfront + S3 é realmente implementado no S3 e funciona assim de acordo com a Amazon:

The request's Origin header must match an AllowedOrigin element.

The request method (for example, GET or PUT) or the Access-Control Request-Method header in case the of a preflight OPTIONS request must be one of the AllowedMethod elements.

Every header listed in the request's Access-Control-Request-Headers header on the preflight request must match an AllowedHeader element.

Isso faz sentido, o que pode não ficar claro é que, se nenhum cabeçalho Origem for enviado pelo cliente, esse processamento não será feito. E estamos usando o Cloudfront na frente, que, se você está hospedando apenas recursos estáticos, provavelmente configurou para ignorar todos os cabeçalhos durante o armazenamento em cache. Portanto, se a primeira solicitação para cada arquivo de um nó de borda específico não incluir o cabeçalho Origem, ele armazenará em cache a resposta sem o cabeçalho Access-Control-Allow-Origin.

O resultado é que a primeira solicitação de entrada determinará quais cabeçalhos sã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 armazenamento em cache pode ficar muito ruim.

• Use o Lambda @ edge para forçar os cabeçalhos, isso pode ser feito apenas uma vez para cada solicitação de origem (S3).

Totalmente flexível, mas adiciona sobrecarga e custo.

• Faça com que a cloud substitua o cabeçalho "Origem" por um valor fictício para cada solicitação.

Isso só é realmente útil no caso "Access-Control-Allow-Origin: *" e é um pouco invasivo, mas é provavelmente a melhor solução atual ao hospedar ativos estáticos no cloudfront + S3.