Eu tenho um aplicativo Javascript que é entregue ao navegador a partir de um endpoint do CloudFront. Todos os arquivos estáticos do aplicativo são hospedados em um bucket do S3. Isso envolve um monte de arquivos javascript e css, bem como alguns arquivos de fonte.
O html que carrega toda a aplicação é gerado e entregue por um servidor, vamos chamar esse servidor de "https://my.domain.com".
Como mencionado, este é apenas o arquivo html. Todo o conteúdo estático é então baixado do endpoint do cloudfront, que aponta para um bucket como sua origem. Vamos chamar esses xxxx.cloudfront.net e o bucket de my-bucket.
Pelo que entendi, praticamente qualquer solicitação desse html gerado para o endpoint do cloudfront é uma solicitação CORS, já que a origem do html é my.domain.com e todos os arquivos solicitados claramente não estão hospedados nesse domínio.
Então, naturalmente, fui configurar todas as coisas do CORS. Em primeiro lugar, o bucket é completamente público e possui a seguinte política CORS:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*",
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
E isso parece funcionar, para tudo... exceto os arquivos de fonte! Eu provavelmente deveria mencionar a estrutura de pastas do bucket. Possui três pastas, produção, desenvolvimento e comum. O conteúdo destes deve ser bastante auto-explicativo. Common contém as fontes, bem como algumas bibliotecas javascript de terceiros. A produção e o desenvolvimento contêm o js e o css para seus respectivos ambientes.
De qualquer forma, tudo carrega, exceto os arquivos de fonte, para os quais recebo o seguinte erro:
Access to font at 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' from origin 'https://my.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Pareceu-me extremamente estranho que apenas os arquivos de fonte tivessem esse problema. Outros arquivos na pasta comum parecem ser carregados muito bem, e se eu apenas colar https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2 no meu navegador, ele funciona .
A única diferença parece ser que esses arquivos não são carregados do html, mas do css via @font-face. Observando as solicitações geradas pelo navegador ao carregar o aplicativo, vejo claramente que, por exemplo, o cabeçalho de origem está definido, o que não era para solicitar arquivos js ou css. Set-Fetch-Mode está definido como "cors", enquanto para os outros arquivos foi definido como "no-cors".
De qualquer forma, tentei corrigir o problema no lado da nuvem. Primeiro, adicionei o cabeçalho "Access-Control-Allow-Origin: *" à configuração de origem. Então eu adicionei uma configuração de comportamento para a origem para permitir GET, HEAD, OPTIONS para o padrão de caminho *.
E agora... bem, agora eu ainda tenho o mesmo problema, e estou completamente sem ideias, embora me perguntando por que o pedido criado por @font-face é formado de forma tão diferente quando comparado aos pedidos de recursos javascript e css, mas acima de tudo, o que diabos posso fazer para carregar neles fontes sangrentas?
Ok, isso foi chato, mas acho lógico.
As correções que postei acima funcionam , mas as alterações de configuração não invalidam o cache do cloudfront. E como os erros de CORS são gerados pelo navegador , o cloudfront fez cache dessa resposta, cabeçalhos e tudo, já que não conseguiu ver nada de errado com ela.
Para encurtar a história: cache de cloudfront invalidado após alterações de configuração, agora funciona. ARGH!