it-swarm.com.de

Awesome Symbole werden in Chrome angezeigt

ich habe gerade auf mehreren Websites bemerkt, dass die Schriftarten-Icons in Google Chrome angezeigt werden. Die Konsole zeigt den folgenden Fehler: 

Schriftart aus Origin ' http://cdn.keywest.life ' wurde von .__ blockiert. Laden durch Cross-Origin Resource Sharing-Richtlinie: Nein Der Header 'Access-Control-Allow-Origin' ist in der angeforderten .__ vorhanden. Ressource. Origin ' http://www.keywest.life ' ist daher nicht erlaubter Zugang.

Ich habe das gleiche Problem auf mehreren anderen Seiten gefunden. Dies kann leicht behoben werden, indem die eigene CDN-Referenz durch Folgendes ersetzt wird:

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

Dies ist jedoch nicht die Lösung, sondern nur eine Problemumgehung. Ich würde gerne den Grund und die richtige Lösung erfahren.

(Die Ursache ist folgende: Die Website verwendet ein eigenes CDN, das von MaxCDN bereitgestellt wird, und enthält den Verweis auf die fantastischen Schriftarten. Diese werden nicht von Chrome geladen, wenn Sie dieselbe Ressource von der oben genannten Bootstrapcdn-Ressource laden arbeitet)

hier ist ein Beispiel für die Ausgabe (im Menü und den sozialen Symbolen in der Fußzeile: http://www.keywestnight.com/fantasy-fest )

Vielen Dank für jede Hilfe/Erklärung!

31
Yatko

Hier ist die Arbeitsmethode, um den Zugriff von allen Domains für Webfonts zu ermöglichen

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>
78
Yatko

Das Problem betrifft nicht die CSS-Datei, sondern die Art und Weise, wie die Schriftartdatei bereitgestellt wird. Die font-awesome.min.css-Datei hat Zeilen wie

@font-face{font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0')
format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') 
format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') 
format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal}

dies bewirkt, dass der Browser eine entsprechende Schriftartdatei (eot, woff, ttf oder svg) von demselben Server wie die CSS-Datei anfordert. Das ist logisch und richtig.

Wenn der Browser diese Schriftartdatei jedoch von cdn.keywest.life anfordert, liest er die Header für einen Access-Control-Allow-Origin-Header und findet keine Kopfzeile, so dass diese Fehlermeldung angezeigt wird. (Dies scheint mir ein Browser-Fehler zu sein, da er vom selben Server stammt wie die CSS-Datei).

Wenn Sie maxcdn.bootstrapcdn.com verwenden, enthält die Antwort stattdessen den Access-Control-Allow-Origin:*-Header, und der Browser akzeptiert diese Schriftartdatei. Wenn Ihr CDN-Server diesen Header enthält, funktioniert er auch.

Wenn Sie einen Apache-Server haben, lesen Sie diese Antwort: Font-awesome wird nicht richtig in Firefox angezeigt/Wie kann ich über CDN verkaufen?

17
Brent Washburne

Ich verwende eine CDN, die es mir nicht erlaubt, ihre Antwort zu ändern. Daher änderte ich font-awesome.min.css und ersetzte den relativen Pfad durch den absoluten Pfad.

2
laike9m

Keine der Antworten funktionierte für mich, ich musste eine Edge-Regel für maxcnd back office erstellen (die Konfigurationsdatei in Ihrer Zone ändert).

Mehr Infos hier

https://www.maxcdn.com/one/tutorial/Edge-rules-recipes/https://www.maxcdn.com/one/tutorial/create-a-rule/

2
Ka.

Dieses Problem beim Zugriff auf Ressourcen, die auf Fonts zugreifen, war für viele Menschen ein Problem ohne umfassende Erklärung und Lösung des Problems.

Was ist CORS:

Cross-Origin Resource Sharing (CORS) ist ein Mechanismus, der zusätzliche HTTP-Header verwendet, um einem Benutzeragenten die Berechtigung zum Zugriff auf ausgewählte Ressourcen von einem Server in einem anderen Origin (einer anderen Domäne) als der aktuell verwendeten Site zu erteilen. Ein Benutzeragent stellt eine Cross-Origin-HTTP-Anforderung aus, wenn er eine Ressource von einer anderen Domäne, einem anderen Protokoll oder einem anderen Port als dem angefordert, von dem das aktuelle Dokument stammt.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Das Problem:

Das Problem ist darauf zurückzuführen, wie die fantastischen Schriftarten geladen werden.

@font-face{
    font-family:'FontAwesome';
    src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
    src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal
}

Die Schriftarten werden über das Stylesheet (CSS) geladen. Die Situation, die wir hier haben, ist:

 Web assets access

Die Lösung:

Während in Ihrem Dateispeicher CORS-Regeln erstellt wurden, z. S3 und der Zugriff auf die Ressource für die betreffende Domäne wurde gewährt, wenn CDN versucht, die im CSS angegebenen Schriftarten zu laden, ist der beim Laden dieser Schriftarten angegebene Ursprung/Domäne der des CDN, jedoch hat der CDN kein CORS-Zugriff gewährt Domain.

Erstellen Sie eine CORS-Regel für die CDN-Domäne.

1
avantprime