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


159

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.


5
J'ai le même problème ... J'ai commencé à le remarquer après la mise à niveau vers chrome 37.0.2062.94
kirley

Après avoir mis à jour la configuration CORS, j'ai renommé les actifs et j'ai réussi à le faire fonctionner. Donc, soit 1) la configuration CORS est appliquée uniquement à la création du fichier (pas la mise à jour) OU 2) la configuration CORS est mise en cache sur Cloudfront. Je publierai ceci comme réponse si d'autres peuvent confirmer que cela fonctionne aussi pour eux.
Dallas Clark

1
Je viens de remarquer cela avec Chrome v.37.0.2062.94 mais pas une version antérieure. Je n'ai pas du tout de configuration CORS sur S3, donc cela ne devrait pas se produire, non?
Ghopper21

1
@ Ghopper21 vous avez besoin de la bonne configuration CORS. Testez dans Firefox et cela vous donnera (probablement) le même résultat.
Tim Diggins

1
@RichPeck - corrigez en ajoutant la bonne configuration CORS à S3 (ou si vous créez automatiquement votre CDN à partir de la source, alors c'est un peu plus compliqué - vous devez ajouter les en-têtes appropriés, puis invalider vos polices en cache) ... stackoverflow.com / questions / 12229844 /… voir la réponse ci-dessous pour plus de détails
Tim Diggins

Réponses:


87

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"

1
Salut, quelle est la différence avec Header set Access-Control-Allow-Origin "*"? Merci
NineCattoRules

8
pour les utilisateurs de Windows, définissez <add name = "Access-Control-Allow-Origin" value = "*" /> sous <customHeaders> dans le fichier web.config. Bonne journée
Arsalan Saleem

2
@Simone la différence est qu'avec "add" l'en-tête de réponse est ajouté à l'ensemble d'en-têtes existant, même si cet en-tête existe déjà. Cela peut entraîner deux (ou plus) en-têtes ayant le même nom; tandis qu'avec "set", l'en-tête de réponse est défini, remplaçant tout en-tête précédent par ce nom. Dans ce cas, c'est la même cause * les inclut tous.
Giovanni Di Gregorio

@GiovanniDiGregorio Merci pour la belle info!
NineCattoRules

21
Le simple Access-Control-Allow-Origin "*"fait de noter est potentiellement non sécurisé car cela ouvre le domaine à un accès javascript à partir de n'importe quel domaine. Vous devriez utiliser une valeur de domaine spécifique à la place, par exemple Access-Control-Allow-Origin "http://example1.com"Voir aussi stackoverflow.com/a/10636765/583715 pour une bonne explication.
David Thomas

59

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.


Merci pour cette réponse, il semble que cela puisse être un problème pour beaucoup d'autres. Bien que mon problème se produise dans une version stable de Chrome.
Dallas Clark

45
Cela se produit actuellement dans Chrome.
justingordon

Alors que les gens continuent de se référer (y compris moi-même!) À cette réponse, je l'ai rendue moins historique et plus pertinente pour le présent.
Tim Diggins

1
Aussi, pour info, j'ai découvert qu'un message d'erreur "a été bloqué de chargement 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'origine" était en fait liée à un mauvais chemin vers un fichier de police dans mon serveur d'origine, et cloudfront puis redirection vers la page d'accueil de mon serveur (et la réponse de redirection ou la page d'accueil n'avaient pas les en-têtes CORS). Confus, mais résolu en utilisant le chemin correct vers le fichier de police réel (pas un problème CORS, à proprement parler).
Tim Diggins

Salut @DallasClark, vous voudrez peut-être choisir une réponse acceptée pour votre question. Merci Tim, vos liens et explications ont été utiles dans mon expérience. À votre santé.
Dan

46

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>

je ne suis pas sûr de la sécurité, ce serait bien si quelqu'un avait une contribution à ce sujet ..
Özer S.

Ce changement a-t-il besoin de temps pour se propager? Je viens d'ajouter <AllowedMethod>HEAD</AllowedMethod>à ma politique CORS sur le seau et cela ne fonctionne toujours pas.
Salvatore Iovene

généralement non, cela devrait prendre max. quelques minutes
Özer S.


12

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.


1
Cela ne semble pas fonctionner, avez-vous plus de détails? J'ai activé cela mais j'obtiens toujours exactement le même problème.
Jaco Pretorius

7

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


1
Impressionnant! Merci beaucoup!
Rotimi

1
Comme votre code était détaillé, il m'a fallu un certain temps pour le parcourir, mais j'ai appris peu de choses. J'en ai appliqué une partie pour peaufiner ma solution. Ça a marché.
Mohammed Moinuddin Waseem

3

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.


2

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");

Mérite un vote pour nous souvenir des utilisateurs de Windows.
mohrtan

J'utilise asp.net core, comment puis-je ajouter cela au fichier appsettings.json?
Yusuff Sodiq

1

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.


0

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


-5

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é.


4
Veuillez éviter les réponses par lien uniquement. Il sera utile que vous puissiez copier des extraits pertinents de l'article lié dans votre réponse. Merci.
bPratik
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.