Le chargement de la police d'origine a été bloqué par la politique de partage des ressources inter-origines.

Question

Je reçois l'erreur suivante sur quelques navigateurs Chrome, mais pas tous. Je ne sais pas exactement quel est le problème à ce stade.

Police d'origine ' https://ABCDEFG.cloudfront.net a été bloqué au chargement par la politique de partage des ressources inter-origines : Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origine ' https://sub.domain.com L'accès est donc interdit.

J'ai la configuration CORS suivante sur S3

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

La demande

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

Toutes les autres demandes provenant de Cloudfront/S3 fonctionnent correctement, y compris les fichiers JS.

Answer 1

Ajoutez cette règle à votre .htaccess

Header add Access-Control-Allow-Origin "*" 

Encore mieux, comme suggéré par @david thomas, vous pouvez utiliser une valeur de domaine spécifique, par ex.

Header add Access-Control-Allow-Origin "your-domain.com"

Answer 2

Depuis ~Sep/Oct 2014, Chrome soumet les polices aux mêmes vérifications CORS que Firefox. https://code.google.com/p/chromium/issues/detail?id=286681 . Il y a une discussion à ce sujet dans https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Étant donné que, pour les polices, le navigateur peut faire un vérification avant vol alors votre politique S3 a également besoin de l'en-tête de demande cors . Vous pouvez vérifier votre page dans Safari (qui, à l'heure actuelle, ne vérifie pas le CORS pour les polices) et dans Firefox (qui le fait) pour vous assurer que c'est bien le problème décrit.

Voir la réponse de Stack overflow sur Amazon S3 CORS (Cross-Origin Resource Sharing) et le chargement de polices inter-domaines de Firefox pour les détails de Amazon S3 CORS.

NB en général, car cela ne s'appliquait auparavant qu'à Firefox, il peut donc être utile de rechercher Firefox plutôt que Chrome.

Answer 3

J'ai pu résoudre le problème en ajoutant simplement <AllowedMethod>HEAD</AllowedMethod> à la politique CORS du seau S3.

Exemple :

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

Answer 4

Nginx :

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3 :

1. Sélectionnez votre seau
2. Cliquez sur les propriétés en haut à droite
3. Permissions => Modifier la configuration de Cors => Sauvegarder
4. Sauvez

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

Answer 5

Le 26 juin 2014, AWS a publié une version appropriée de Vary : Origin sur CloudFront, de sorte qu'il suffit désormais de

Définissez une configuration CORS pour votre seau S3 :

<AllowedOrigin>*</AllowedOrigin>

Dans CloudFront -> Distribution -> Comportements pour cette origine, utilisez l'option Forward Headers : Whitelist et mettez l'en-tête 'Origin' sur la liste blanche.

Patientez pendant ~20 minutes pendant que CloudFront propage la nouvelle règle

Maintenant, votre distribution CloudFront devrait mettre en cache différentes réponses (avec les en-têtes CORS appropriés) pour différents en-têtes d'origine du client.