2017-06-29 2 views
1

Lorsque vous hébergez FontAwesome sur un CDN, comment autorisez-vous le chargement de polices lorsque le domaine de ce CDN ne correspond pas au domaine de votre serveur?Comment autoriser FontAwesome à charger des polices d'un autre domaine

J'ai mes médias hébergés dans un compartiment S3, à partir d'un point de terminaison Cloudfront. Ma page Web, servie depuis example.com, contient des liens vers ce point de terminaison Cloudfront, et toutes les demandes de média initiales à ce point de terminaison aboutissent. Toutefois, si je déclenche une JS qui essaie de rendre le nouveau contenu de FontAwesome, l'amenant à essayer de charger des polices, je reçois une erreur comme:

Access to Font at 'http://lkfejwifisj.cloudfront.net/font-awesome-4.2.0/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access. 

J'ai fait la politique de mon seau S3 CORS aussi ouvert que possible avec la configuration :

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>HEAD</AllowedMethod> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedMethod>POST</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
</CORSRule> 
</CORSConfiguration> 

Cependant, cela n'a pas résolu le problème.

J'utilise Chrome comme navigateur, et apparemment ce type d'erreur a déjà été mentionné manymany auparavant. Cependant, aucune des solutions proposées ne sont applicables ou ne fonctionnent pas pour moi.

Comment résoudre ce problème? Pourquoi Chrome indique-t-il que l'en-tête "Accès-Contrôle-Autorisation-Origine" est présent sur la ressource demandée ", lorsque j'autorise explicitement toutes les origines dans ma configuration CORS?

Répondre

1

Il s'est avéré que ma configuration CORS est correcte et corrige le problème, mais mon navigateur met en cache l'ancienne requête et je vois toujours la même erreur.

Si je charge la page dans un navigateur de navigation privée, m'assurant que mon cache est effacé, je ne reçois pas l'erreur.