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 simplement l'utilisation de l'origine dans votre si vous utilisez node.js comme serveur...

comme ceci

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

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

Answer 2

Si vous souhaitez autoriser toutes les polices d'un dossier pour un domaine spécifique, vous pouvez utiliser cette option :

  <location path="assets/font">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

où assets/font est l'emplacement où se trouvent toutes les polices et http://localhost:3000 est l'emplacement que vous voulez autoriser.

Answer 3

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

Voici exactement ce que vous pouvez faire si vous exécutez votre application Rails sur Heroku et utilisez Cloudfront comme CDN. Il a été testé sur Ruby 2.1 + Rails 4, Heroku Cedar stack.

Ajout d'en-têtes HTTP CORS (Access-Control-*) aux actifs de la police

• Ajouter une pierre précieuse font_assets à Gemfile .
• bundle install
• Ajouter config.font_assets.origin = '*' à config/application.rb . Si vous souhaitez 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
• Pousser le code vers Heroku.

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

Dans Cloudfront, sélectionnez votre distribution, sous l'onglet "behavior", 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). Modifiez En-têtes avant de "None" à "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 !

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