Le chargement de la police d'origine a été bloqué par la politique de partage de ressources cross-origin

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.

Le chargement de la police d'origine « https://ABCDEFG.cloudfront.net » a été bloqué par la politique de partage de ressources inter-origines: aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée. L' accès à l' origine ' https://sub.domain.com ' n'est donc pas autorisé.

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 de Cloudfront / S3 fonctionnent correctement, y compris les fichiers JS.

Ajoutez cette règle à votre .htaccess

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

mieux encore, 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 ~ septembre / octobre 2014 soumet les polices aux mêmes vérifications CORS que Firefox a effectuées 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 effectuer une vérification en amont , votre stratégie S3 a également besoin de l'en-tête de demande cors . Vous pouvez vérifier votre page dans Safari (qui actuellement ne vérifie pas CORS pour les polices) et Firefox (qui le fait) pour vérifier que c'est le problème décrit.

Consultez la réponse sur le débordement de pile sur Amazon S3 CORS (partage de ressources inter-origines) et le chargement de polices inter-domaines Firefox pour les détails Amazon S3 CORS.

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

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>

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. Autorisations => Modifier la configuration Cors => Enregistrer
4. sauver

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

Le 26 juin 2014, AWS a publié le comportement approprié de Vary: Origin sur CloudFront.

Définissez une configuration CORS pour votre compartiment S3:

<AllowedOrigin>*</AllowedOrigin>

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

Attendez environ 20 minutes pendant que CloudFront propage la nouvelle règle

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

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

Collez-le dans 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 fourni la solution:

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

La version courte de celui-ci est:

1. Modifier la configuration S3 CORS (mon exemple de code ne s'affichait pas correctement)
   Remarque: Ceci est déjà fait dans la question d'origine
   Remarque: le code fourni n'est pas très sécurisé, plus d'informations dans la page liée.
2. Allez dans l'onglet "Comportements" de votre distribution et cliquez pour modifier
3. Remplacez "En-têtes de transfert" de "Aucun (améliore la mise en cache)" en "Liste blanche".
4. Ajouter "Origine" à la liste "En-têtes de la liste blanche"
5. Enregistrez les modifications

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

Pour ceux qui utilisent des produits Microsoft avec un fichier web.config:

Fusionnez ceci avec votre web.config.

Pour autoriser sur n'importe quel domaine, remplacez value="domain"parvalue="*"

<?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'êtes pas autorisé à modifier web.config, ajoutez cette ligne dans votre code côté serveur.

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

Il y a un bel article ici .

Configurer cela dans nginx / apache est une erreur.
Si vous utilisez une société d'hébergement, vous ne pouvez pas configurer la périphérie.
Si vous utilisez Docker, l'application doit être autonome.

Notez que certains exemples utilisent connectHandlersmais cela ne définit que les en-têtes sur le document. L'utilisation rawConnectHandlerss'applique à tous les 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 le bon moment pour examiner la politique du navigateur comme le cadrage, etc.

Ajoutez simplement l'utilisation de l'origine dans votre si vous utilisez node.js comme serveur ...

comme ça

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

Nous avons besoin d'une réponse pour l'origine

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

Vous trouverez ci-dessous exactement ce que vous pouvez faire si vous exécutez votre application Rails dans Heroku et que vous utilisez Cloudfront comme CDN. Il a été testé sur Ruby 2.1 + Rails 4, pile Heroku Cedar.

Ajouter des en-têtes HTTP CORS (Access-Control- *) aux actifs de police

• Ajoutez une gemme font_assetsà Gemfile.
• bundle install
• Ajouter config.font_assets.origin = '*'à config/application.rb. Si vous voulez un contrôle plus granulaire, vous pouvez ajouter différentes valeurs d'origine à différents environnements, par exemple,config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• Poussez le code vers Heroku.

Configurer Cloudfront pour transférer les en-têtes HTTP CORS

Dans Cloudfront, sélectionnez votre distribution, sous l'onglet «comportement», sélectionnez et modifiez l'entrée qui contrôle la livraison de vos polices (pour la plupart des applications Rails simples, vous n'avez qu'une seule entrée ici). Changez les en- têtes de transfert de «Aucun» à «Whilelist». Et ajoutez les en-têtes suivants à la liste blanche:

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

Enregistrez-le et c'est tout!

Attention: j'ai trouvé que parfois Firefox ne rafraîchissait pas les polices même si l'erreur CORS avait disparu. Dans ce cas, continuez à rafraîchir la page plusieurs fois pour convaincre Firefox que vous êtes vraiment déterminé.