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

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

Collez ceci 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

Answer 2

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 est la suivante :

1. Modifier la configuration de S3 CORS (mon exemple de code ne s'est pas affiché correctement)
   Note : Ceci est déjà fait dans la question originale.
   Note : le code fourni n'est pas très sûr, plus d'informations dans la page liée.
2. Allez dans l'onglet "Comportements" de votre distribution et cliquez pour modifier
3. Changez "Forward Headers" de "None (Improves Caching)" à "Whitelist".
4. Ajoutez "Origin" à la liste "Whitelist Headers".
5. Sauvegarder les changements

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

Answer 3

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 remplacer value="domain" avec 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 le droit de modifier le fichier web.config, ajoutez cette ligne dans votre code côté serveur.

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

Answer 4

Pour AWS S3, le réglage du partage des ressources entre origines (CORS) à la valeur suivante a fonctionné pour moi :

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Answer 5

Il y a un bon article 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 Docker, l'application doit être autonome.

Notez que certains exemples utilisent connectHandlers mais cela ne définit que les en-têtes sur le document. Utilisation de rawConnectHandlers s'applique à tous les actifs servis (fonts/csss/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 politique de navigation comme le cadrage, etc.