Fonts sind blockiert in Web-Client cors

Question

Während ich arbeitete in lokalen alles funktionierte perfekt, jetzt habe ich auf ein Hosting hochgeladen und die Schriften werden von etwas blockiert, von dem ich noch nie gehört habe (CORS). Die Schriftarten (und css, js usw.) befinden sich in einer Subdomäne, da URLs vom Index analysiert werden (also funktionieren Pfade in der Domäne nicht). Die CSS/JS funktionieren einwandfrei.

Dies ist die Ausgabe in der Web-Konsole (Firefox):

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Oxygen-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> 
downloadable font: download failed (font-family: "Oxygen-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Oxygen-Regular.ttf styles.css:10:12 
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Montserrat-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> 
downloadable font: download failed (font-family: "Montserrat-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Montserrat-Regular.ttf styles.css:6:12 
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> 
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff2 bootstrap.css:267:12 
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> 
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff bootstrap.css:267:12 
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> 
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.ttf bootstrap.css:267:12 

ich für dieses Problem gesucht, aber ich kann dieses especific Problem mit Schriften und der genauen Fehlermeldung nicht finden.

EDIT:

Das Update ist der Header für die Domäne/Ordner dient, die Dateien zu ermöglichen. Die Konfiguration kann entweder im virtuellen Host-Block oder in einer .htaccess-Datei (in dem Ordner, in dem sich die Dateien befinden) sein. Ich ziehe es in dem vhost Block Einstellung:

<IfModule mod_headers.c> 
    SetEnvIf Origin "https://(www|sub1|sub2|sub3).domain.com)$" ACAO=$0 
    Header set Access-Control-Allow-Origin "%{ACAO}e" env=ACAO 
    Header set Access-Control-Allow-Methods "GET" 
</IfModule> 

In diesem Beispiel ist die Access-Control-Allow-Origin nur den Header für die Whitelist-Domain und Subdomains senden. Ich umadressiere von domain.com zu www.domain.com, so dass dieses Beispiel eine Domäne ohne www nicht akzeptiert.

Answer 1

Ihr Browser beschwert sich über eine fehlende Header: Access-Control-Allow-Origin

Da dieser Header Ihrem Browser fehlt nicht weiß, dass der gewünschte Zugang legit ist. Schauen Sie sich http://enable-cors.org an und wählen Sie die für Ihren Server geeignete Konfiguration.

Sie müssen den Server konfigurieren, auf dem die Schriftarten gespeichert sind!

Answer 2

Interesting gotcha:

lighttpd ermöglicht es Ihnen, einen benutzerdefinierten Header für alle Anforderungen hinzufügen, indem diese in einem bestimmten Kontext fügt hinzu:

setenv.add-response-header = ("Access-Control-Allow-Origin" => "*") 

Dazu arbeiten Sie müssen die mod_setenv ermöglichen . Aber wenn Sie dieses Modul nicht aktivieren, bevor Sie Ihr mod_status Modul aktivieren, werden Sie nie die benutzerdefinierte sehen Header kommen aus Ihrer lighttpd HTTP-Response-Header Ausgabe