web-dev-qa-db-fra.com

Le chargement des polices d'origine a été bloqué par la stratégie de partage des ressources d'origine croisée.

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

La police de l'origine ' https://ABCDEFG.cloudfront.net ' a été bloquée par la stratégie de partage des ressources cross-origin: aucun en-tête 'Access-Control-Allow-Origin-Origin' est présent sur la ressource demandée. Origin ' 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.

amazon-web-servicesamazon-s3corsamazon-cloudfront
152
Dallas Clark

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"
83
Giovanni Di Gregorio

Depuis ~ septembre/octobre 2014, Chrome soumet les polices à la même vérification CORS que celle de Firefox https://code.google.com/p/chromium/issues/detail?id=286681 . Il existe 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 un contrôle en amont , alors votre stratégie S3 a également besoin de l’en-tête de la requête cors . Vous pouvez vérifier votre page dans Safari (ce qui pour le moment ne vérifie pas les polices dans CORS) et dans Firefox (dans le cas contraire) pour vérifier qu'il s'agit bien du problème décrit.

Reportez-vous à Réponse du dépassement de capacité de la pile sur Amazon S3 CORS (partage de ressources inter-origine) et chargement de polices inter-domaines Firefox pour obtenir les détails relatifs à Amazon S3 CORS.

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

57
Tim Diggins

J'ai pu résoudre le problème en ajoutant simplement <AllowedMethod>HEAD</AllowedMethod> à la stratégie CORS du godet 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>
44
Özer S.

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 Cors => Enregistrer
  4. Sauver

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

29
Yaniv Vova Alterman

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 En-têtes avant: liste blanche et liste blanche l'en-tête "Origine".

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

Votre distribution CloudFront devrait maintenant mettre en cache différentes réponses (avec les en-têtes CORS appropriés) pour différents en-têtes Origin du client.

12
KBH

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

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

4
Luigi04

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:

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

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

3
agbodike

Il y a une belle écriture ici .

La configuration dans nginx/Apache est une erreur.
Si vous utilisez une société d’hébergement, vous ne pouvez pas configurer Edge.
Si vous utilisez Docker, l'application devrait être autonome.

Notez que certains exemples utilisent connectHandlers mais cela ne définit que les en-têtes du document. Utiliser rawConnectHandlers s’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 un bon moment pour regarder politique du navigateur comme l'encadrement, etc.

1
Michael Cole

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

Fusionner ceci avec votre web.config.

Pour autoriser n'importe quel domaine, remplacez 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'êtes pas autorisé à modifier web.config, ajoutez cette ligne dans votre code côté serveur.

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