Font Awesome-Symbole, die in Chrome nicht angezeigt werden, ein MaxCDN-bezogenes Richtlinie-Problem mit der Richtlinie "Cross-Origin Resource Sharing"

ist nur aufgefallen, auf mehreren websites, die die font-awesome-icons sind, zeigt Google Chrome. Die Konsole zeigt folgenden Fehler:

Schrift vom Ursprung 'http://cdn.keywest.life' wurde blockiert
das laden von Cross-Origin Resource Sharing policy: Keine
'Access-Control-Allow-Origin' - header vorhanden ist, auf die angeforderte
Ressource. Herkunft ' http://www.keywest.life " ist daher nicht
wird der Zugriff erlaubt.

Fand ich die exakte gleiche Problem auf mehrere andere Standorte. Dies kann leicht behoben werden durch Austausch der eigenen CDN Referenz:

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

-dies ist jedoch nicht die Lösung, nur ein workaround. Ich würde gerne die Ursache kennen und die richtige Lösung.

(die Ursache ist diese: die Webseite ist in der Verwendung seiner eigenen CDN, zur Verfügung gestellt von MaxCDN und hat die Referenz auf das font-awesome-Schriften, und diese sind nicht geladen, Chrom, wenn Sie beim laden die gleiche Ressource aus der Bootstrapcdn Ressource -oben erwähnt - es funktioniert)

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

Vielen Dank für jede Hilfe/explanatioon!

InformationsquelleAutor der Frage Yatko | 2014-09-30

  1. 69

    Hier ist die Arbeitsmethode, mit der ermöglichen den Zugriff von allen Domänen für webfonts:

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

    InformationsquelleAutor der Antwort Yatko

  2. 15

    Das problem ist nicht mit der CSS-Datei, es hat damit zu tun, wie die font-Datei serviert wird. Die font-awesome.min.css Datei Zeilen hat, wie die

    @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}

    wodurch der browser zum anfordern einer entsprechenden schriftart-Datei (eot, woff, ttf, svg) vom gleichen server wie die CSS-Datei. Dies ist logisch und richtig.

    Jedoch, wenn der browser die schriftart-Datei von cdn.keywest.life es liest die Header für eine Access-Control-Allow-Origin header und nicht finden, so gibt es diese Fehlermeldung. (Dies scheint ein browser-Fehler auf mich, denn es kommt von dem gleichen server wie der CSS-Datei).

    Statt, wenn Sie maxcdn.bootstrapcdn.com die Antwort enthält die Access-Control-Allow-Origin:* header und der browser nimmt diese font-Datei. Wenn Sie Ihre cdn-server enthalten, die dieser header dann würde es auch funktionieren.

    Wenn Sie einen Apache-server, siehe diese Antwort: Font-awesome nicht richtig angezeigt, bei Firefox /wie vend via CDN?

    InformationsquelleAutor der Antwort Brent Washburne

  3. 2

    Keiner der Antworten, die für mich gearbeitet, ich hatte zum erstellen einer edge-Regel auf maxcnd back-office (das ändern der config-Datei auf, die Sie zone)

    Mehr info hier

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

    InformationsquelleAutor der Antwort Ka.

  4. 2

    Ich verwende ein CDN, dass mir nicht erlaubt zu ändern, seine Reaktion, so dass ich geändert font-awesome.min.css ersetzen relativen Pfad mit dem absoluten Pfad, und es funktionierte.

    InformationsquelleAutor der Antwort laike9m

  5. 0

    Dieser Ausgabe des Zugriff auf font-awesome assets wurde ein problem für viele Menschen ohne eine umfassende Erklärung und Lösung für das problem.

    Was ist CORS:

    Cross-Origin Resource Sharing (CORS) ist ein Mechanismus, der verwendet zusätzliche HTTP-Header zu lassen, einen user-agent-erlangen die Berechtigung zum Zugriff auf ausgewählte Ressourcen von einem server auf einen anderen Ursprung (domain), als der site die Sie gerade benutzen. Ein user-agent macht einen cross-origin-HTTP-Anforderung bei Anforderung einer Ressource von einer anderen domain, Protokoll oder port als dem, aus dem das aktuelle Dokument stammt.

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

    Das Problem:

    Das problem rührt, wie der font-awesome fonts geladen.

    @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 Schriften sind geladen über das stylesheet (CSS). Die situation, die wir hier haben, ist:

    Font Awesome-Symbole, die in Chrome nicht angezeigt werden, ein MaxCDN-bezogenes Richtlinie-Problem mit der Richtlinie

    Die Lösung:

    Während CORS Regeln erstellt wurden, auf Ihre file-storage-z.B. S3, und der Zugriff auf die Ressource wurde die Domäne in Frage, wenn die CDN zu laden versucht die Schriftarten angegeben in der CSS die Herkunft/Domäne angegeben ist, beim laden dieser Schriften ist, dass der CDN-aber keine CORS-Zugang gegeben hat, um die CDN-domain.

    Erstellen eines CORS-Regel für die CDN-domain.

    InformationsquelleAutor der Antwort avantprime

Schreibe einen Kommentar