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

Ich bin der Gestaltung einer website (z.B. mywebsite.com) und diese Website lädt font-face Schriftarten von einem anderen Standort (sagen anothersite.com). Ich hatte Probleme mit der font-face font-laden in Firefox und ich lese auf dieser blog:

Firefox (unterstützt @font-face
von v3.5) nicht erlaubt cross-domain
Schriftarten standardmäßig. Dies bedeutet, dass die schriftart
muss sein, serviert von der gleichen domain
(und sub-domain), es sei denn, Sie hinzufügen können
"Access-Control-Allow-Origin" - header
die schriftart.

Wie kann ich die Access-Control-Allow-Origin-header zu der schriftart?

InformationsquelleAutor der Frage Ash | 2011-02-15

146

Also, was Sie tun, ist... In den font-Ordner "Dateien" legen Sie eine htaccess Datei mit dem folgenden.
```
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
```
auch in Ihrer remote-CSS-Datei, die font-face-Deklaration benötigt die volle absolute URL der schriftart-Datei (nicht notwendig in der lokalen CSS-Dateien):

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')

}
```
Dass das Problem zu beheben. Eine Sache zu beachten ist, dass können Sie genau angeben, welche domains erlaubt sein sollte, um den Zugriff auf Ihre Schrift. In der obigen htaccess habe ich angegeben, dass jeder zugreifen kann meine Schrift mit "*" aber begrenzen Sie es auf:

Einer einzigen URL:
```
Access-Control-Allow-Origin: http://example.com
```
~~Oder eine Komma-separierte Liste von URLs~~

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

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

InformationsquelleAutor der Antwort Ash
21

Laut die offiziellen docsBrowser mag es nicht, wenn Sie die
```
Access-Control-Allow-Origin: "*"
```
header, wenn man auch die
```
Access-Control-Allow-Credentials: "true"
```
header. Stattdessen wollen Sie Sie zulassen, dass Ihre Herkunft im besonderen. Wenn Sie immer noch wollen, dass alle Ursprünge, die Sie tun können, einige einfache Apache-Magie, um es zu arbeiten (stellen Sie sicher, Sie haben mod_headers aktiviert):
```
Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN
```
Browser sind erforderlich, um zu senden der Origin header auf allen cross-domain-requests. Die docs ausdrücklich angegeben ist, dass Sie brauchen, um echo der header in der Access-Control-Allow-Origin header, wenn Sie akzeptieren/Planung, über die Annahme der Anfrage. Das ist es, was diese Header Richtlinie tut.

InformationsquelleAutor der Antwort laughingbovine
5

Akzeptiert die Antwort nicht funktioniert bei mir leider nicht, da meine Seite die CSS-Dateien mit @import die CSS font-Dateien, und diese sind alle gespeichert auf einem Rackspace Cloud Files CDN.

Da der Apache die Header werden nie erzeugt (da mein CSS ist nicht auf Apache), hatte ich mehrere Dinge tun:
1. Gehen Sie auf die Cloud-UI-Dateien und fügen Sie einen benutzerdefinierten header ("Access-Control-Allow-Origin mit dem Wert *) für jeden font-awesome-Datei
2. Ändern Sie den Content-Type des woff-und ttf-Dateien auf font/woff und font/ttf bzw.
Sehen, ob Sie können sich mit nur #1, da der zweite braucht ein wenig Befehlszeile Arbeit.

Hinzufügen des benutzerdefinierten header in #1:
- Ansicht die cloud files container für die Datei
- nach unten scrollen, um die Datei
- klicken Sie auf das ZAHNRAD-Symbol
- klicken Sie auf Bearbeiten, Header
- wählen Sie " Access-Control-Allow-Origin
- fügen Sie das Zeichen '*' (ohne die Anführungszeichen)
- drücken Sie die EINGABETASTE
- wiederholen Sie den Vorgang für die anderen Dateien
Wenn Sie brauchen, um weiter und tun #2, dann benötigen Sie eine Kommandozeile 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
```
Aus den Ergebnissen, die zurückgegeben werden, extrahieren Sie 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
```
Natürlich, dieser Prozess funktioniert nur, wenn Sie mit der Rackspace CDN. Andere CDNs bieten können ähnliche Einrichtungen zu Bearbeiten-Objekt-Header und ändern von Inhaltstypen, also vielleicht wirst du Glück (und nach einigen extra-info hier).

InformationsquelleAutor der Antwort Phil

Für Java-basierte Anwendung, fügen Sie es zu Ihrem web.xml Datei:

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

InformationsquelleAutor der Antwort Neon Sun

2

Überprüfen Sie diesen link.. Es wird auf jeden Fall dein problem lösen..
Es gibt viele Lösungen, um cross-domain-Ajax-Aufrufe zu BEKOMMEN
ABER POST-ANFORDERUNG FÜR CROSS-DOMAIN-PROBLEM IST HIER. Es hat mich 3 Tage, um es herauszufinden.

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

InformationsquelleAutor der Antwort user2440156
1

In Ihrem file.php der ajax-Anfrage, kann der Sollwert header.
```
<?php header('Access-Control-Allow-Origin: *'); //for all ?>
```
InformationsquelleAutor der Antwort Santos L. Victor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.