Jak dodać nagłówek Access-Control-Allow-Origin

99

Projektuję witrynę internetową (np. Mywebsite.com), a ta witryna ładuje czcionki czcionek z innej witryny (np. Anothersite.com). Miałem problemy z ładowaniem czcionki kroju czcionki w przeglądarce Firefox i czytałem na tym blogu :

Firefox (który obsługuje @ font-face od wersji 3.5) domyślnie nie zezwala na czcionki międzydomenowe. Oznacza to, że czcionka musi być obsługiwana z tej samej domeny (i subdomeny), chyba że można dodać do czcionki nagłówek „Access-Control-Allow-Origin”.

Jak mogę ustawić nagłówek Access-Control-Allow-Origin na czcionkę?

Mazatek
źródło
uznał to za powiązane: stackoverflow.com/q/14003332/1423096
alo Malbarez

Odpowiedzi:

164

Więc to, co robisz, to ... W folderze plików czcionek umieść plik htaccess zawierający następujące elementy.

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

również w zdalnym pliku CSS deklaracja font-face wymaga pełnego bezwzględnego adresu URL pliku czcionki (nie jest potrzebny w lokalnych plikach CSS):

na przykład

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

}

To rozwiąże problem. Należy pamiętać, że możesz dokładnie określić, które domeny powinny mieć dostęp do Twojej czcionki. W powyższym htaccess określiłem, że każdy może uzyskać dostęp do mojej czcionki, "*"ale możesz go ograniczyć do:

Pojedynczy adres URL:

Zestaw nagłówków Access-Control-Allow-Origin http://example.com

Lub lista adresów URL rozdzielonych przecinkami

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

(Wiele wartości nie jest obsługiwanych w obecnych implementacjach)

Mazatek
źródło
1
Nie musisz używać pełnych ścieżek. Prosta url('/fonts/League_Gothic.woff') format('woff')jest wystarczająco zakładając zachować folder „Czcionki” w tym samym katalogu, co plik .css.
StrayObject
1
To rozwiązanie jest również ważne dla żądań międzydomenowych .ajax !! Miły!
Izaak
3
@StrayObject - zdalny plik CSS będzie musiał używać pełnych ścieżek. Lokalny plik CSS nie musi.
Mazatec
Najwyraźniej nie jest możliwe umieszczenie na białej liście wielu adresów URL, rozdzielanych przecinkami lub w inny sposób; zobacz błąd 671608
Tgr
1
Ta odpowiedź ( stackoverflow.com/a/4110601 ) wydaje się sugerować, że lista oddzielona przecinkami nie działa
Asaf
21

Zgodnie z oficjalną dokumentacją przeglądarki nie lubią, gdy używasz rozszerzenia

Access-Control-Allow-Origin: "*"

nagłówek, jeśli używasz również

Access-Control-Allow-Credentials: "true"

nagłówek. Zamiast tego chcą, abyś pozwolił konkretnie na ich pochodzenie. Jeśli nadal chcesz zezwalać na wszystkie źródła, możesz wykonać prostą magię Apache, aby działała (upewnij się, że jest mod_headerswłączona):

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

Przeglądarki muszą wysyłać Originnagłówek we wszystkich żądaniach między domenami. Dokumenty wyraźnie stwierdzają, że musisz powtórzyć ten nagłówek z powrotem w Access-Control-Allow-Originnagłówku, jeśli akceptujesz / planujesz przyjąć żądanie. To właśnie robi ta Headerdyrektywa.

roześmiany bydło
źródło
2
to wydaje się działać również dla mnie, chociaż wydaje się, że ma efekt uboczny konieczności wyczyszczenia pamięci podręcznej, jeśli odwiedzasz dwie różne witryny, które uzyskują dostęp do tej witryny
Jack James,
1
@Jack: tak, jest duży dla zawartości CDN (patrząc na ciebie, pliki czcionek). W zależności od ustawień buforowania, możesz skończyć z zawartością pliku i niepoprawnym nagłówkiem CORS utrzymującym się lokalnie (jak w twoim scenariuszu) lub na serwerze proxy! (niszczenie pamięci podręcznej z ?yourdomaindziałaniami w tym drugim przypadku, ale nieco dewaluuje korzyści płynące z korzystania z CDN)
ov
2
Z pewnych powodów HTTP_ORIGIN nie jest ustawiony dla mnie, musiałem dodać tę linię SetEnvIfNoCase Origin (.+) HTTP_ORIGIN=$1.
David Riccitelli
5

Zaakceptowana odpowiedź niestety nie działa dla mnie, ponieważ pliki CSS mojej witryny @ importują pliki CSS czcionek, a wszystkie są przechowywane na CDN Rackspace Cloud Files.

Ponieważ nagłówki Apache nigdy nie są generowane (ponieważ mojego CSS nie ma na Apache), musiałem zrobić kilka rzeczy:

  1. Przejdź do interfejsu Cloud Files i dodaj niestandardowy nagłówek (Access-Control-Allow-Origin z wartością *) dla każdego pliku awesome font
  2. Zmień typ zawartości plików woff i ttf odpowiednio na font / woff i font / ttf

Sprawdź, czy uda ci się uciec tylko z numerem 1, ponieważ drugi wymaga trochę pracy z wiersza poleceń.

Aby dodać niestandardowy nagłówek w # 1:

  • wyświetl kontener plików w chmurze dla pliku
  • przewiń w dół do pliku
  • kliknij ikonę koła zębatego
  • kliknij Edytuj nagłówki
  • wybierz Access-Control-Allow-Origin
  • dodaj pojedynczy znak „*” (bez cudzysłowów)
  • wciśnij Enter
  • powtórz dla innych plików

Jeśli chcesz kontynuować i zrobić # 2, potrzebujesz wiersza poleceń z 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

Z zwróconych wyników wyodrębnij wartości X-Auth-Token i 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

Oczywiście ten proces działa tylko wtedy, gdy używasz Rackspace CDN. Inne sieci CDN mogą oferować podobne możliwości edycji nagłówków obiektów i zmiany typów zawartości, więc może będziesz miał szczęście (i opublikujesz tutaj dodatkowe informacje).

Phil
źródło
3

W przypadku aplikacji opartej na języku Java dodaj to do pliku web.xml:

<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>
Neonowe słońce
źródło
1

W pliku file.php żądania ajax, można ustawić nagłówek wartości.

<?php header('Access-Control-Allow-Origin: *'); //for all ?>
Santos L. Victor
źródło