AWS S3, CloudFront, erro CORS de fonte da web

Question

Acabei de me mudar do meu CDN anterior para o CloudFront em dois dos meus sites. O primeiro está funcionando bem, mas usei o mesmo snapshot no DigitalOcean para criar o segundo site e aqui estou conseguindo

Access to Font at 'http://CLOUDFRONT_HOSTNAME.cloudfront.net/wp-content/themes/Newspaper/images/icons/newspaper.woff?14' from origin 'http://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.

Eu tentei todas as possíveis soluções disponíveis on-line, como adicionar um cabeçalho no nginx.

location ~* \.(ttf|ttc|otf|eot|woff|svg|font.css)$ {
    add_header Access-Control-Allow-Origin *;
}

Atualizando a privacidade no S3

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

A maioria das soluções está presente em vários sites, incluindo outras soluções de falha de servidor e stackoverflow. Eu também invalidei o arquivo de fonte no CloudFront, mas sem sorte: (

Alguém por favor pode me orientar qual pode ser o problema? Eu conectei o CloudFront através do plugin W3 Total Cache no WP.

UPDATE

1. Cabeçalhos da lista de permissões

2.Invalidouosarquivos

Solicitação e resposta

Obrigado antecipadamente

Arif

    

Answer 1

Tem certeza de que está enviando Authorization header com suas solicitações GET das fontes?

Se não, na sua mudança de política do S3 CORS

<AllowedHeader>Authorization</AllowedHeader>

para

<AllowedHeader>*</AllowedHeader> .

Esta pequena falha me incomodou por um mês.

    

Answer 2

No console do AWS - CloudFront - Comportamento de edição de distribuição, no cabeçalho de vau, defina a Whitelist e adicione Origem nos cabeçalhos da lista de desbloqueio.

    

Answer 3

Eu estava procurando por isso hoje e não consegui encontrar nenhuma resposta funcional para o meu cenário.

Eu estou usando o wordpress e usando s3 com base em buckets push cdn com amazon cloudfront. No entanto, os arquivos de fontes estavam dando o erro para o CORS.

O erro disse:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://–domain–.cloudfront.net/wp-content/themes/Extra/fonts/ET-Extra.ttf. (Reason: CORS header ‘Access-Control_Allow-Origin’ missing).

A solução foi definir as permissões CORS do bucket s3. Mas não os padrões. Eu mudei para:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://www.domain-here.com</AllowedOrigin>
<AllowedOrigin>https://www.domain-here.com</AllowedOrigin>
<AllowedOrigin>http://domain-here.com</AllowedOrigin>
<AllowedOrigin>https://domain-here.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
</CORSRule>
</CORSConfiguration>

Certifique-se de alterar o domínio aqui para o seu próprio nome de domínio.

Além disso, não se esqueça de limpar o seu cache / invalidar o arquivo que estava dando problema, se necessário.

Você pode ver este tutorial também para orientação: link

Espero que ajude.