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

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

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)

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.

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

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>

Sprawdź ten link .. To na pewno rozwiąże Twój problem. Istnieje wiele rozwiązań umożliwiających nawiązywanie połączeń międzydomenowych GET Ajax, ALE PROŚBA O PUBLIKACJĘ O CROSS DOMAIN JEST ROZWIĄZANA TUTAJ . Zajęło mi to 3 dni.

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

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

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