La police de origin a été bloquée lors du chargement par la Politique de partage des ressources Cross-Origin

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 exemple

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

Chrome depuis ~Sep / Oct 2014 rend les polices soumises aux mêmes contrôles CORS que Firefox a fait 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 besoin du cors demande en-tête ainsi . Vous pouvez vérifier votre page dans say Safari (qui ne fait pas actuellement la vérification des polices de caractères par CORS) et Firefox (qui le fait) pour vérifier deux fois que c'est le problème décrit.

Voir débordement de Pile réponse sur Amazon S3 CORS (Cross-Origin Resource sharing) et Firefox inter-domaine de la police lors du chargement de pour Amazon S3 CORS de détails.

NB en général parce que cela s'appliquait uniquement à Firefox, de sorte qu'il peut aide à la recherche de Firefox plutôt que de Chrome.

j'ai pu résoudre le problème en ajoutant simplement <AllowedMethod>HEAD</AllowedMethod> à la politique du 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>

Nginx:

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

AWS S3:

1. Sélectionnez votre seau
2. cliquez Propriétés sur le haut à droite
3. Permisions => Modifier La Scro De Configuration => Save
4. Enregistrer

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

le 26 juin 2014, AWS publié proper Vary: comportement D'origine sur CloudFront donc maintenant vous juste

définissez une Configuration CORS pour votre seau S3:

<AllowedOrigin>*</AllowedOrigin>

Dans CloudFront -> Distribution> Comportements de cette origine, l'utilisation de l'Avant-Têtes: option de la liste Blanche et liste blanche de l' "Origine" de l'en-tête.

attendre ~20 minutes tandis que CloudFront propage la nouvelle règle

la distribution devrait mettre en cache différentes réponses (avec des en-têtes CORS appropriés) pour différents en-têtes d'Origine du client.

la seule chose qui a fonctionné pour moi (probablement parce que j'avais des incohérences avec www. d'utilisation):

collez ceci à votre .fichier htaccess:

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

j'ai eu ce même problème et ce lien m'a apporté la solution:

http://www.holovaty.com/writing/cors-ie-cloudfront /

la version courte est:

1. Modifier S3 de la SCRO config (mon exemple de code ne s'affiche pas correctement)
   
   Note: Ceci est déjà fait dans la question originale
   
   Remarque: le code fourni n'est pas très sécurisé, plus d'infos dans la page liée.
2. allez à L'onglet" Comportements "de votre distribution et cliquez pour modifier
3. Changement "de l'Avant-Têtes" à partir de "None (Améliore la mise en Cache)" à la "liste Blanche."
4. ajouter "origine" à la "liste des en-têtes de liste blanche
5. Enregistrer les modifications

votre distribution cloudfront sera mise à jour, ce qui prend environ 10 minutes. Après cela, tout doit être bien, vous pouvez vérifier en vérifiant que les messages d'erreur liés au CORS ont disparu du navigateur.

Il y a un bel article intitulée ici .

configurer ceci dans nginx/apache est une erreur.

Si vous utilisez une société d'hébergement vous ne pouvez pas configurer le bord.

Si vous utilisez le Panneau, l'application doit être autonome.

notez que certains exemples utilisent connectHandlers mais cela ne fixe que les en-têtes sur le doc. L'utilisation de rawConnectHandlers s'applique à tous actifs servis (polices/css/etc).

  // HSTS only the document - don't function over http.  
  // Make sure you want this as it won't go away for 30 days.
  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); // 2592000s / 30 days
    next();
  });

  // CORS all assets served (fonts/etc)
  WebApp.rawConnectHandlers.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    return next();
  });

Ce serait un bon moment à regarder navigateur politique comme le cadrage, etc.

pour ceux qui utilisent des produits Microsoft avec un web.fichier de configuration:

fusionnez ceci avec votre web.config.

pour permettre sur n'importe quel domaine de remplacer value="domain" par value="*"

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="domain" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
</configuration>

si vous n'avez pas la permission de modifier web.config, puis ajoutez cette ligne dans votre code côté serveur.

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

la solution de travail pour heroku est ici http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (les citations suivre):

ci-dessous est exactement ce que vous pouvez faire si vous utilisez votre application Rails à Heroku et en utilisant Cloudfront comme CDN. Il a été testé sur Ruby 2.1 + Rails 4, la pile de cèdre Heroku.

Ajouter de la SCRO en-têtes HTTP (Contrôle d'Accès-*) actifs de polices

• ajouter gem font_assets à Gemfile .
• bundle install
• ajouter config.font_assets.origin = '*' à config/application.rb . Si vous voulez plus de contrôle granulaire, vous pouvez ajouter des valeurs d'origine différentes à un environnement différent, par exemple, config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• passez le code à Heroku.

Configurer Cloudfront à l'avant de la SCRO en-têtes HTTP

Dans Cloudfront, sélectionnez votre distribution, sous l'onglet" behavior", sélectionnez et éditez l'entrée qui contrôle la livraison de vos polices (pour la plupart des applications simples, vous n'avez qu'une entrée ici). Remplacer forward Headers De "None"par " Whilelist". Et ajouter les en-têtes suivants à la liste blanche:

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

Enregistrer et c'est tout!

mise en garde: j'ai trouvé que parfois Firefox ne rafraîchit pas les polices même si L'erreur CORS a disparu. Dans ce cas, continuez rafraîchir la page quelques fois pour convaincre Firefox que vous êtes vraiment déterminé.