So fügen Sie einen Access-Control-Allow-Origin-Header hinzu

Ich entwerfe eine Website (z. B. mywebsite.com) und diese Website lädt Schriftarten von einer anderen Website (z. B. anothersite.com). Ich hatte Probleme mit dem Laden der Schriftart in Firefox und las in diesem Blog :

Firefox (das @ font-face ab Version 3.5 unterstützt) erlaubt standardmäßig keine domänenübergreifenden Schriftarten. Dies bedeutet, dass die Schriftart von derselben Domäne (und Unterdomäne) bereitgestellt werden muss, es sei denn, Sie können der Schriftart einen Header "Access-Control-Allow-Origin" hinzufügen.

Wie kann ich den Header Access-Control-Allow-Origin auf die Schriftart setzen?

Was Sie also tun, ist ... Legen Sie im Ordner "font files" eine htaccess-Datei mit den folgenden Angaben ab.

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Auch in Ihrer Remote-CSS-Datei benötigt die Schriftartdeklaration die vollständige absolute URL der Schriftartdatei (in lokalen CSS-Dateien nicht erforderlich):

z.B

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('http://www.example.com/css/fonts/League_Gothic.svg')

}

Das wird das Problem beheben. Beachten Sie, dass Sie genau angeben können, welche Domains auf Ihre Schriftart zugreifen dürfen. Im obigen htaccess habe ich angegeben, dass jeder auf meine Schriftart zugreifen kann, "*"jedoch können Sie sie auf Folgendes beschränken:

Eine einzelne URL:

Header-Set Access-Control-Allow-Origin http://example.com

Oder eine durch Kommas getrennte Liste von URLs

Access-Control-Allow-Origin: http://site1.com,http://site2.com

(Mehrere Werte werden in aktuellen Implementierungen nicht unterstützt.)

Laut den offiziellen Dokumenten gefällt es Browsern nicht, wenn Sie das verwenden

Access-Control-Allow-Origin: "*"

Header, wenn Sie auch die verwenden

Access-Control-Allow-Credentials: "true"

Header. Stattdessen möchten sie, dass Sie ihre Herkunft spezifisch zulassen. Wenn Sie weiterhin alle Ursprünge zulassen möchten, können Sie eine einfache Apache-Magie ausführen, um sie zum Laufen zu bringen (stellen Sie sicher, dass Sie sie mod_headersaktiviert haben):

Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN

Browser müssen den OriginHeader für alle domänenübergreifenden Anforderungen senden . In den Dokumenten wird ausdrücklich angegeben, dass Sie diesen Header wieder im Access-Control-Allow-OriginHeader wiedergeben müssen, wenn Sie die Anforderung annehmen / planen. Das ist es, was diese HeaderRichtlinie tut.

Die akzeptierte Antwort funktioniert bei mir leider nicht, da meine Site-CSS-Dateien die Schriftart-CSS-Dateien importieren und diese alle auf einem Rackspace Cloud Files-CDN gespeichert sind.

Da die Apache-Header nie generiert werden (da mein CSS nicht auf Apache ist), musste ich verschiedene Dinge tun:

1. Gehen Sie zur Benutzeroberfläche für Cloud-Dateien und fügen Sie einen benutzerdefinierten Header (Access-Control-Allow-Origin mit dem Wert *) für jede font-awesome-Datei hinzu
2. Ändern Sie den Inhaltstyp der woff- und ttf-Dateien in font / woff bzw. font / ttf

Sehen Sie, ob Sie mit nur # 1 davonkommen können, da die zweite ein wenig Kommandozeilenarbeit erfordert.

So fügen Sie den benutzerdefinierten Header in # 1 hinzu:

• Zeigen Sie den Cloud-Dateicontainer für die Datei an
• Scrollen Sie nach unten zur Datei
• Klicken Sie auf das Zahnradsymbol
• Klicken Sie auf Header bearbeiten
• Wählen Sie Access-Control-Allow-Origin
• füge das einzelne Zeichen '*' hinzu (ohne Anführungszeichen)
• drücke Enter
• Wiederholen Sie dies für die anderen Dateien

Wenn Sie fortfahren und # 2 ausführen müssen, benötigen Sie eine Befehlszeile mit CURL

curl -D - --header "X-Auth-Key: your-auth-key-from-rackspace-cloud-control-panel" --header "X-Auth-User: your-cloud-username" https://auth.api.rackspacecloud.com/v1.0

Extrahieren Sie aus den zurückgegebenen Ergebnissen die Werte für X-Auth-Token und X-Storage-Url

curl -X POST \
  -H "Content-Type: font/woff" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woff

curl -X POST \
  -H "Content-Type: font/ttf" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf

Dieser Vorgang funktioniert natürlich nur, wenn Sie das Rackspace-CDN verwenden. Andere CDNs bieten möglicherweise ähnliche Funktionen zum Bearbeiten von Objektheadern und zum Ändern von Inhaltstypen. Vielleicht haben Sie Glück (und veröffentlichen hier einige zusätzliche Informationen).

Fügen Sie für Java-basierte Anwendungen Folgendes zu Ihrer web.xml-Datei hinzu:

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.ttf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.otf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.eot</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff</url-pattern>
</servlet-mapping>

Überprüfen Sie diesen Link. Es wird definitiv Ihr Problem lösen. Es gibt viele Lösungen, um domänenübergreifende GET Ajax-Anrufe zu tätigen, ABER POST-ANFRAGE FÜR CROSS DOMAIN WIRD HIER GELÖST . Ich habe 3 Tage gebraucht, um es herauszufinden.

http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx

Kann in Ihrer file.php der Anfrage ajax den Wertheader setzen.

<?php header('Access-Control-Allow-Origin: *'); //for all ?>