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

159

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.

Dallas Clark
quelle
5
Ich habe das gleiche Problem ... Ich bemerkte es nach dem Upgrade auf Chrome 37.0.2062.94
Kirley
Nach dem Aktualisieren der CORS-Konfiguration habe ich die Assets umbenannt und es geschafft, sie zum Laufen zu bringen. Also entweder 1) Die CORS-Konfiguration wird nur bei der Dateierstellung angewendet (nicht aktualisiert) ODER 2) Die CORS-Konfiguration wird bei Cloudfront zwischengespeichert. Ich werde dies als Antwort posten, wenn andere bestätigen können, dass es auch für sie funktioniert.
Dallas Clark
1
Ich habe dies gerade mit Chrome v. 37.0.2062.94 bemerkt, aber nicht mit einer früheren Version. Ich habe überhaupt keine CORS-Konfiguration in S3, also sollte dies nicht passieren, oder?
Ghopper21
1
@ Ghopper21 Sie benötigen die richtige CORS-Konfiguration. Testen Sie in Firefox und Sie erhalten das (wahrscheinlich) gleiche Ergebnis.
Tim Diggins
1
@RichPeck - Behebung durch Hinzufügen der richtigen CORS-Konfiguration zu S3 (oder wenn das automatische Erstellen Ihres CDN aus dem Quellcode etwas komplizierter ist - Sie müssen die entsprechenden Header hinzufügen und dann Ihre zwischengespeicherten Schriftarten ungültig machen) ... stackoverflow.com / Fragen / 12229844 /… siehe Antwort unten für weitere Details
Tim Diggins

Antworten:

87

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"
Giovanni Di Gregorio
quelle
1
Hallo, was ist der Unterschied Header set Access-Control-Allow-Origin "*"? Danke
NineCattoRules
8
Setzen Sie für Windows-Benutzer in der Datei web.config unter <customHeaders> den Wert <add name = "Access-Control-Allow-Origin" = "*" />. Einen schönen Tag noch
Arsalan Saleem
2
@ Simone Der Unterschied besteht darin, dass mit "Hinzufügen" der Antwortheader zu den vorhandenen Headern hinzugefügt wird, auch wenn dieser Header bereits vorhanden ist. Dies kann dazu führen, dass zwei (oder mehr) Header denselben Namen haben. Während mit "set" der Antwortheader gesetzt wird, wird jeder vorherige Header durch diesen Namen ersetzt. In diesem Fall ist die gleiche Ursache * schließt sie alle ein.
Giovanni Di Gregorio
@GiovanniDiGregorio Danke für die nette Info!
NineCattoRules
21
Das bloße Notieren Access-Control-Allow-Origin "*"ist möglicherweise unsicher, da die Domain für den Javascript-Zugriff von jeder Domain aus geöffnet wird. Sie sollten stattdessen einen bestimmten Domänenwert verwenden, z Access-Control-Allow-Origin "http://example1.com". B. eine gute Erklärung finden Sie auch unter stackoverflow.com/a/10636765/583715 .
David Thomas
58

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.

Tim Diggins
quelle
Vielen Dank für diese Antwort, es sieht so aus, als ob es für viele andere ein Problem sein könnte. Obwohl mein Problem in einem stabilen Build von Chrome auftrat.
Dallas Clark
45
Dies geschieht jetzt in Chrome.
Justingordon
Da sich die Leute (einschließlich meiner selbst!) Immer wieder auf diese Antwort beziehen, habe ich sie für die Gegenwart weniger historisch und relevanter gemacht.
Tim Diggins
1
Außerdem habe ich festgestellt, dass eine Fehlermeldung "Das Laden wurde durch die Richtlinie zur gemeinsamen Nutzung von Ressourcen zwischen verschiedenen Quellen blockiert: In der angeforderten Ressource ist kein Header" Zugriffssteuerung - Zulassen von Ursprung "vorhanden. Ursprung" hatte tatsächlich mit einem Fehler zu tun Pfad zu einer Schriftartdatei auf meinem ursprünglichen Server und Cloudfront, die dann zur Homepage meines Servers umleitet (und entweder die Weiterleitungsantwort oder die Homepage hatten keine CORS-Header). Verwirrend, aber gelöst, indem der richtige Pfad zur eigentlichen Schriftartdatei verwendet wird (streng genommen kein CORS-Problem).
Tim Diggins
Hey @DallasClark, vielleicht möchten Sie eine akzeptierte Antwort auf Ihre Frage wählen. Danke Tim, deine Links und Erklärungen waren meiner Erfahrung nach hilfreich. Prost.
Dan
46

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>
Özer S.
quelle
Ich bin mir nicht sicher über die Sicherheit, wäre aber nett, wenn jemand etwas dazu hätte.
Özer S.
Braucht diese Veränderung Zeit, um sich zu verbreiten? Ich habe gerade <AllowedMethod>HEAD</AllowedMethod>meine CORS-Richtlinie für den Bucket hinzugefügt und sie funktioniert immer noch nicht.
Salvatore Iovene
normalerweise nein, es sollte max. paar Minuten
Özer S.
12

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.

KBH
quelle
1
Das scheint nicht zu funktionieren, haben Sie weitere Details? Ich habe dies aktiviert, bekomme aber immer noch genau das gleiche Problem.
Jaco Pretorius
7

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

Luigi04
quelle
1
Genial! Vielen Dank!
Rotimi
1
Da Ihr Code detailliert war, dauerte es einige Zeit, bis ich ihn durchgearbeitet hatte. Ich habe jedoch einige Dinge gelernt. Ich habe einen Teil davon angewendet, um meine Lösung zu optimieren. Es funktionierte.
Mohammed Moinuddin Waseem
3

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.

agbodike
quelle
2

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");
nu everest
quelle
Verdient eine Abstimmung für die Erinnerung an uns Windows-Benutzer.
Mohrtan
Ich verwende asp.net core. Wie füge ich dies der Datei appsettings.json hinzu?
Yusuff Sodiq
1

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 .

Michael Cole
quelle
0

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

Daksh Patel
quelle
-5

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.

mihserf
quelle
4
Bitte vermeiden Sie Antworten nur mit Link. Es ist hilfreich, wenn Sie relevante Ausschnitte aus dem verlinkten Artikel in Ihre Antwort kopieren können. Vielen Dank.
bPratik