Das Laden von Schriftarten aus dem Ursprung wurde durch die Richtlinie zur gemeinsamen Nutzung von Ressourcen zwischen verschiedenen Ursprüngen blockiert

Bei einigen Chrome-Browsern wird der folgende Fehler angezeigt, jedoch nicht bei allen. Ich bin mir nicht ganz sicher, worum es derzeit geht.

Die Schriftart vom Ursprung ' https://ABCDEFG.cloudfront.net ' wurde durch die Richtlinie zur gemeinsamen Nutzung von Ressourcen zwischen verschiedenen Ursprüngen blockiert: Für die angeforderte Ressource ist kein Header 'Zugriffssteuerung-Zulassen-Ursprung' vorhanden. Origin ' https://sub.domain.com ' ist daher kein Zugriff gestattet.

Ich habe die folgende CORS-Konfiguration auf S3

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Die Anfrage

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

Alle anderen Anforderungen von Cloudfront / S3 funktionieren ordnungsgemäß, einschließlich JS-Dateien.

Fügen Sie diese Regel Ihrem .htaccess hinzu

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

noch besser, wie von @david thomas vorgeschlagen, können Sie einen bestimmten Domänenwert verwenden, z

Header add Access-Control-Allow-Origin "your-domain.com"

In Chrome werden Schriftarten seit ~ Sep / Okt 2014 denselben CORS-Prüfungen unterzogen wie Firefox unter https://code.google.com/p/chromium/issues/detail?id=286681 . Eine Diskussion hierzu finden Sie unter https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Da der Browser für Schriftarten möglicherweise eine Preflight-Prüfung durchführt , benötigt Ihre S3-Richtlinie auch den cors-Anforderungsheader . Sie können Ihre Seite in Safari (das derzeit keine CORS-Prüfung auf Schriftarten durchführt) und Firefox (das tut dies) überprüfen, um zu überprüfen, ob dies das beschriebene Problem ist.

Weitere Informationen zu Amazon S3 CORS finden Sie unter Antwort auf Stapelüberlauf beim Amazon S3 CORS (Cross-Origin Resource Sharing) und beim domänenübergreifenden Laden von Firefox-Schriftarten .

Hinweis im Allgemeinen, da dies früher nur für Firefox galt. Daher kann es hilfreich sein, nach Firefox und nicht nach Chrome zu suchen.

Ich konnte das Problem lösen, indem ich einfach <AllowedMethod>HEAD</AllowedMethod>die CORS-Richtlinie des S3-Buckets hinzufügte .

Beispiel:

<?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. Wählen Sie Ihren Eimer
2. Klicken Sie oben rechts auf Eigenschaften
3. Berechtigungen => Cors-Konfiguration bearbeiten => Speichern
4. sparen

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

Am 26. Juni 2014 hat AWS das richtige Vary: Origin-Verhalten auf CloudFront veröffentlicht

Legen Sie eine CORS-Konfiguration für Ihren S3-Bucket fest:

<AllowedOrigin>*</AllowedOrigin>

Verwenden Sie in CloudFront -> Verteilung -> Verhalten für diesen Ursprung die Option "Header weiterleiten: Whitelist" und den Header "Ursprung" auf die Whitelist.

Warten Sie ca. 20 Minuten, während CloudFront die neue Regel weitergibt

Jetzt sollte Ihre CloudFront-Distribution verschiedene Antworten (mit geeigneten CORS-Headern) für verschiedene Client-Origin-Header zwischenspeichern.

Das einzige, was für mich funktioniert hat (wahrscheinlich, weil ich Inkonsistenzen mit der WWW-Nutzung hatte):

Fügen Sie dies in Ihre .htaccess-Datei ein:

<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

Ich hatte das gleiche Problem und dieser Link bot die Lösung für mich:

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

Die Kurzversion davon ist:

1. Bearbeiten der S3 CORS-Konfiguration (mein Codebeispiel wurde nicht richtig angezeigt)
   Hinweis: Dies wurde bereits in der ursprünglichen Frage durchgeführt.
   Hinweis: Der bereitgestellte Code ist nicht sehr sicher. Weitere Informationen finden Sie auf der verlinkten Seite.
2. Gehen Sie zur Registerkarte "Verhalten" Ihrer Distribution und klicken Sie zum Bearbeiten
3. Ändern Sie "Header weiterleiten" von "Keine (verbessert das Caching)" in "Whitelist".
4. Fügen Sie "Origin" zur Liste "Whitelist Headers" hinzu
5. Speichern Sie die Änderungen

Ihre Cloudfront-Distribution wird aktualisiert, was ungefähr 10 Minuten dauert. Danach sollte alles in Ordnung sein. Sie können überprüfen, ob die CORS-bezogenen Fehlermeldungen vom Browser entfernt wurden.

Für Benutzer von Microsoft-Produkten mit einer web.config-Datei:

Führen Sie dies mit Ihrer web.config zusammen.

Um auf einer Domain zuzulassen, ersetzen Sie value="domain"durchvalue="*"

<?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>

Wenn Sie keine Berechtigung zum Bearbeiten von web.config haben, fügen Sie diese Zeile in Ihren serverseitigen Code ein.

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

Es gibt einen schönen writeup hier .

Die Konfiguration in Nginx / Apache ist ein Fehler.
Wenn Sie ein Hosting-Unternehmen verwenden, können Sie den Edge nicht konfigurieren.
Wenn Sie Docker verwenden, sollte die App eigenständig sein.

Beachten Sie, dass einige Beispiele verwenden connectHandlers, dies jedoch nur Header im Dokument festlegt. Die Verwendung rawConnectHandlersgilt für alle bereitgestellten Assets (Schriftarten / CSS / usw.).

  // 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();
  });

Dies wäre ein guter Zeitpunkt, um sich die Browser-Richtlinien wie Framing usw. anzusehen .

Fügen Sie einfach die Verwendung von origin in Ihre hinzu, wenn Sie node.js als Server verwenden ...

so was

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

Wir brauchen eine Antwort für den Ursprung

Die Arbeitslösung für Heroku finden Sie hier http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (Zitate folgen):

Im Folgenden finden Sie genau das, was Sie tun können, wenn Sie Ihre Rails-App in Heroku ausführen und Cloudfront als CDN verwenden. Es wurde auf Ruby 2.1 + Rails 4, Heroku Cedar Stack getestet.

Fügen Sie den Schriftarten Assets CORS HTTP-Header (Access-Control- *) hinzu

• In Juwel font_assetszu Gemfile.
• bundle install
• Hinzufügen config.font_assets.origin = '*'zu config/application.rb. Wenn Sie eine detailliertere Steuerung wünschen, können Sie verschiedenen Umgebungen unterschiedliche Ursprungswerte hinzufügen, z.config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• Code an Heroku senden.

Konfigurieren Sie Cloudfront für die Weiterleitung von CORS-HTTP-Headern

Wählen Sie in Cloudfront Ihre Distribution aus, wählen Sie auf der Registerkarte "Verhalten" den Eintrag aus und bearbeiten Sie ihn, der die Übermittlung Ihrer Schriftarten steuert (für die meisten einfachen Rails-Apps haben Sie hier nur einen Eintrag). Ändern Sie die Weiterleitungsüberschriften von "Keine" in "Whilelist". Fügen Sie der Whitelist die folgenden Header hinzu:

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

Speichern Sie es und das war's!

Vorsichtsmaßnahme: Ich habe festgestellt, dass Firefox die Schriftarten manchmal nicht aktualisiert, selbst wenn der CORS-Fehler behoben ist. In diesem Fall aktualisieren Sie die Seite einige Male, um Firefox davon zu überzeugen, dass Sie wirklich entschlossen sind.