Access-Control-Allow-Origin başlığı nasıl eklenir

Bir web sitesi tasarlıyorum (ör. Mywebsite.com) ve bu site başka bir siteden (örneğin anothersite.com) font-face fontları yüklüyor. Firefox'ta yazı tipi yüzü yazı tipi yüklemesiyle ilgili sorunlar yaşıyordum ve bu blogda okudum :

Firefox (v3.5'ten @ font-face'i destekler) varsayılan olarak etki alanları arası yazı tiplerine izin vermez. Bu, yazı tipine bir “Access-Control-Allow-Origin” başlığı ekleyemediğiniz sürece yazı tipinin aynı etki alanından (ve alt etki alanından) sunulması gerektiği anlamına gelir.

Access-Control-Allow-Origin başlığını yazı tipine nasıl ayarlayabilirim?

Yani yaptığınız şey ... Yazı tipi dosyaları klasörüne, içinde aşağıdakileri içeren bir htaccess dosyası koyun.

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

ayrıca uzak CSS dosyanızda, font-face bildirimi font dosyasının tam mutlak URL'sine ihtiyaç duyar (yerel CSS dosyalarında gerekli değildir):

Örneğin

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

}

Bu sorunu çözecektir. Unutulmaması gereken bir nokta, yazı tipinize tam olarak hangi alan adlarının erişmesine izin verileceğini belirtebilmenizdir. Yukarıdaki htaccess'te herkesin yazı tipime erişebileceğini belirttim, "*"ancak aşağıdakilerle sınırlayabilirsiniz:

Tek bir URL:

Üstbilgi kümesi Erişim-Denetimi-İzin Ver-Kaynak http://example.com

Veya virgülle ayrılmış bir URL listesi

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

(Mevcut uygulamalarda birden çok değer desteklenmemektedir)

Göre resmi dokümanlar kullandığınızda, tarayıcılar bunu sevmiyorum

Access-Control-Allow-Origin: "*"

başlığı da kullanıyorsanız

Access-Control-Allow-Credentials: "true"

başlık. Bunun yerine, özellikle kökenlerine izin vermenizi istiyorlar. Yine de tüm kaynaklara izin vermek istiyorsanız, onu çalıştırmak için bazı basit Apache sihrini yapabilirsiniz ( mod_headersetkinleştirdiğinizden emin olun ):

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

Tarayıcıların Origintüm etki alanları arası isteklerde başlığı göndermesi gerekir . Dokümanlar Access-Control-Allow-Origin, isteği kabul ediyorsanız / kabul etmeyi planlıyorsanız, bu başlığı tekrar başlıkta tekrarlamanız gerektiğini özellikle belirtir . Bu Headerdirektifin yaptığı şey bu .

Kabul edilen cevap maalesef benim için işe yaramıyor, çünkü sitem CSS dosyaları font CSS dosyalarını @ içe aktarıyor ve bunların tümü bir Rackspace Bulut Dosyaları CDN'sinde depolanıyor.

Apache başlıkları asla oluşturulmadığından (CSS'm Apache'de olmadığından), birkaç şey yapmam gerekiyordu:

1. Bulut Dosyaları Kullanıcı Arayüzüne gidin ve her bir harika yazı tipi dosyası için özel bir başlık (değer içeren Access-Control-Allow-Origin *) ekleyin
2. Woff ve ttf dosyalarının İçerik Türünü sırasıyla font / woff ve font / ttf olarak değiştirin

Bakalım sadece 1 numara ile paçayı sıyırabilir misin, çünkü ikincisi biraz komut satırı çalışması gerektiriyor.

Özel başlığı # 1'e eklemek için:

• dosya için bulut dosyaları konteynerini görüntüleyin
• dosyaya ilerleyin
• dişli simgesini tıklayın
• Başlıkları Düzenle'yi tıklayın
• Access-Control-Allow-Origin'i seçin
• '*' tek karakterini ekleyin (tırnak işaretleri olmadan)
• Enter'a basın
• diğer dosyalar için tekrarlayın

Devam etmeniz ve # 2 yapmanız gerekiyorsa, CURL ile bir komut satırına ihtiyacınız olacak

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

Döndürülen sonuçlardan X-Auth-Token ve X-Storage-Url değerlerini çıkarın

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

Elbette, bu işlem yalnızca Rackspace CDN kullanıyorsanız çalışır. Diğer CDN'ler, nesne başlıklarını düzenlemek ve içerik türlerini değiştirmek için benzer olanaklar sunabilir, bu nedenle belki şansınız olur (ve burada bazı ekstra bilgiler yayınlarsınız).

Java tabanlı Uygulama için bunu web.xml dosyanıza ekleyin:

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

Bu bağlantıyı kontrol edin .. Sorununuzu kesinlikle çözecektir .. Etki alanları arası Ajax çağrıları yapmak için birçok çözüm vardır ANCAK ÇAPRAZ DOMAIN İÇİN POST TALEBİ BURADA ÇÖZÜLÜR . Anlamak 3 günümü aldı.

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

Ajax isteğinizin file.php dosyasında değer başlığı ayarlayabilirsiniz.

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