web-dev-qa-db-fra.com

Les icônes Font Awesome n'apparaissant pas dans Chrome, un problème de stratégie de partage de ressources d'origine multiple lié à MaxCDN

je viens de remarquer sur plusieurs sites Web que la police géniale apparaît dans Google Chrome. La console affiche l'erreur suivante: 

La police de Origin ' http://cdn.keywest.life ' a été bloquée depuis chargement par stratégie de partage de ressources d'origine croisée: N ° L'en-tête 'Access-Control-Allow-Origin' est présent sur le .__ demandé. Ressource. Origin ' http://www.keywest.life ' n'est donc pas accès autorisé.

J'ai trouvé le même problème sur plusieurs autres sites. Ceci peut être facilement résolu en remplaçant la propre référence CDN par:

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

Cependant, ce n'est pas la solution, juste une solution de contournement. J'aimerais connaître la raison et la bonne solution.

(La cause est la suivante: le site Web utilise son propre CDN, fourni par MaxCDN. Il contient la référence aux polices awesome fonts et celles-ci ne sont pas chargées par Chrome, si vous chargez la même ressource à partir de la ressource Bootstrapcdn décrite ci-dessus. travaux)

voici un exemple du problème (dans le menu et les icônes sociales dans le pied de page: http://www.keywestnight.com/fantasy-fest )

Merci pour toute aide/explication!

google-chromecdnfont-awesomeaccess-controlcross-domain-policy
31
Yatko

Voici la méthode de travail pour autoriser l'accès à tous les domaines pour les webfonts :

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>
78
Yatko

Le problème ne vient pas du fichier CSS, mais de la manière dont le fichier de police est servi. Le fichier font-awesome.min.css a des lignes comme

@font-face{font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0')
format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') 
format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') 
format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal}

ce qui amène le navigateur à demander un fichier de police approprié (eot, woff, ttf ou svg) au même serveur que le fichier CSS. C'est logique et correct.

Cependant, lorsque le navigateur demande ce fichier de police à partir de cdn.keywest.life, il lit les en-têtes correspondant à un en-tête Access-Control-Allow-Origin et n'en trouve pas. Il envoie donc le message d'erreur correspondant. (Cela me semble être un bug du navigateur car il provient du même serveur que le fichier CSS).

Lorsque vous utilisez maxcdn.bootstrapcdn.com, la réponse inclut plutôt l'en-tête Access-Control-Allow-Origin:* et le navigateur accepte ce fichier de polices. Si votre serveur cdn incluait cet en-tête, cela fonctionnerait aussi.

Si vous avez un serveur Apache, voyez cette réponse: Font-awesome ne s'affiche pas correctement sur Firefox/comment vendre via CDN?

17
Brent Washburne

J'utilise un CDN qui ne me permet pas de modifier sa réponse. J'ai donc modifié font-awesome.min.css, en remplaçant le chemin relatif par le chemin absolu, et cela a fonctionné.

2
laike9m

Aucune des réponses n'a fonctionné pour moi, je devais créer une règle Edge sur max back back office (qui modifie le fichier de configuration sur votre zone)

Plus d'infos ici

https://www.maxcdn.com/one/tutorial/Edge-rules-recipes/https://www.maxcdn.com/one/tutorial/create-a-rule/

2
Ka.

Ce problème d’accès aux ressources font-awesome a été un problème pour beaucoup de gens sans une explication complète et la résolution du problème.

Qu'est-ce que CORS:

Le partage de ressources d'origine croisée (CORS) est un mécanisme qui utilise des en-têtes HTTP supplémentaires pour permettre à un agent d'utilisateur d'obtenir l'autorisation d'accéder aux ressources sélectionnées à partir d'un serveur situé sur un autre domaine (domaine) que le site en cours d'utilisation. Un agent d'utilisateur crée une demande HTTP d'origine croisée lorsqu'il demande une ressource provenant d'un domaine, d'un protocole ou d'un port différent de celui à l'origine du document actuel.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Le problème:

Le problème provient de la façon dont les polices font-awesome sont chargées.

@font-face{
    font-family:'FontAwesome';
    src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
    src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal
}

Les polices sont chargées via la feuille de style (CSS). La situation que nous avons ici est:

 Web assets access

La solution:

Bien que des règles CORS aient été créées sur votre stockage de fichiers, par exemple, S3 et l'accès à la ressource a été donné au domaine en question, lorsque CDN tente de charger les polices spécifiées dans le CSS, l'origine/le domaine spécifié lors du chargement de ces polices est celui du CDN mais qu'aucun accès CORS n'a été attribué au CDN. domaine.

Créer une règle CORS pour le domaine CDN.

1
avantprime