Eu tenho um aplicativo Javascript que é entregue ao navegador a partir de um endpoint do CloudFront. Todos os arquivos estáticos do aplicativo estão hospedados em um bucket S3. Isso envolve vários arquivos javascript e css, bem como alguns arquivos de fontes.
O html que carrega toda a aplicação é gerado e entregue por um servidor, vamos chamar esse servidor de “https://meu.domínio.com”.
Como mencionado, este é apenas o arquivo html.Todoso conteúdo estático é então baixado do endpoint do cloudfront, que aponta para um bucket como sua origem. Vamos chamá-los de 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 todo o material do CORS. Em primeiro lugar, o bucket é totalmente público e possui a seguinte política CORS:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*",
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
E isso parece funcionar, para tudo...excetoos arquivos de fontes! Eu provavelmente deveria mencionar a estrutura de pastas do balde. Possui três pastas, produção, desenvolvimento e comum. O conteúdo destes deve ser bastante autoexplicativo. Common contém as fontes, bem como algumas bibliotecas javascript de terceiros. A produção e o desenvolvimento contêm js e css para seus respectivos ambientes.
Em todo o caso,tudocarrega, 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 queapenasos arquivos de fonte teriam esse problema. Outros arquivos na pasta comum parecem ter sido carregados perfeitamente, e se eu apenas colarhttps://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2no meu navegador, elefunciona.
A única diferença parece ser que esses arquivos não são carregados do html, mas do css através do @font-face. Olhando as solicitações geradas pelo navegador ao carregar o aplicativo, posso ver claramente que por exemplo o cabeçalho Origin 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 adicionei uma configuração de comportamento para a origem para permitir GET, HEAD, OPTIONS para o padrão de caminho *.
E agora... bem, agora ainda tenho o mesmo problema, e estou completamente sem ideias, embora me pergunte por que a solicitação criada por @font-face é formada de forma tão diferente quando comparada às solicitações de recursos javascript e css, mas acima de tudo, o que posso fazer para carregar essas malditas fontes?
Responder1
Ok, isso foi irritante, mas acho lógico.
As correções que postei acimatrabalhe, mas as alterações na configuração não invalidam o cache do Cloudfront. E como os erros do CORS são gerados pelonavegador, o cloudfront armazenou em cache essa resposta, com cabeçalhos e tudo, já que não conseguiu ver nada de errado com ela.
Resumindo: cache do Cloudfront invalidado após alterações de configuração, agora funciona. ARGH!