Cara menambahkan header Access-Control-Allow-Origin

Saya merancang sebuah situs web (mis. Mywebsite.com) dan situs ini memuat font font-face dari situs lain (katakanlah anothersite.com). Saya mengalami masalah dengan pemuatan font font face di Firefox dan saya membaca di blog ini :

Firefox (yang mendukung @ font-face dari v3.5) tidak mengizinkan font lintas domain secara default. Ini berarti font harus disajikan dari domain yang sama (dan sub-domain) kecuali Anda dapat menambahkan header "Access-Control-Allow-Origin" ke font.

Bagaimana cara mengatur header Access-Control-Allow-Origin ke font?

Jadi apa yang Anda lakukan adalah ... Di folder file font letakkan file htaccess dengan berikut di dalamnya.

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

juga di file CSS jarak jauh Anda, deklarasi font-face memerlukan URL absolut lengkap dari file font (tidak diperlukan dalam file CSS lokal):

misalnya

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

}

Itu akan memperbaiki masalah. Satu hal yang perlu diperhatikan adalah Anda dapat menentukan dengan tepat domain mana yang harus diizinkan untuk mengakses font Anda. Dalam htaccess di atas saya telah menetapkan bahwa setiap orang dapat mengakses font saya dengan "*"bagaimanapun Anda dapat membatasinya menjadi:

Satu URL:

Kumpulan header Access-Control-Allow-Origin http://example.com

Atau daftar URL yang dipisahkan koma

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

(Beberapa nilai tidak didukung dalam implementasi saat ini)

Menurut dokumen resmi , browser tidak suka saat Anda menggunakan

Access-Control-Allow-Origin: "*"

header jika Anda juga menggunakan

Access-Control-Allow-Credentials: "true"

header. Sebaliknya, mereka ingin Anda mengizinkan asal mereka secara khusus. Jika Anda masih ingin mengizinkan semua asal, Anda dapat melakukan sihir Apache sederhana untuk membuatnya berfungsi (pastikan Anda telah mod_headersmengaktifkannya):

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

Browser harus mengirimkan Originheader pada semua permintaan lintas domain. Dokumen secara khusus menyatakan bahwa Anda perlu meng-echo header ini kembali di Access-Control-Allow-Originheader jika Anda menerima / berencana untuk menerima permintaan tersebut. Itulah yang dilakukan Headerarahan ini.

Sayangnya, jawaban yang diterima tidak berfungsi untuk saya, karena file CSS situs saya @import file font CSS, dan ini semua disimpan di Rackspace Cloud Files CDN.

Karena header Apache tidak pernah dibuat (karena CSS saya tidak ada di Apache), saya harus melakukan beberapa hal:

1. Buka Cloud Files UI dan tambahkan header khusus (Access-Control-Allow-Origin dengan nilai *) untuk setiap file font-awesome
2. Ubah Content-Type dari file woff dan ttf menjadi font / woff dan font / ttf

Lihat apakah Anda bisa lolos hanya dengan # 1, karena yang kedua membutuhkan sedikit pekerjaan baris perintah.

Untuk menambahkan tajuk khusus di # 1:

• lihat penampung file cloud untuk file tersebut
• gulir ke bawah ke file
• klik ikon roda gigi
• klik Edit Headers
• pilih Access-Control-Allow-Origin
• tambahkan karakter tunggal '*' (tanpa tanda kutip)
• tekan enter
• ulangi untuk file lainnya

Jika Anda perlu melanjutkan dan melakukan # 2, Anda memerlukan baris perintah dengan 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

Dari hasil yang dikembalikan, ekstrak nilai untuk X-Auth-Token dan 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

Tentu saja, proses ini hanya berfungsi jika Anda menggunakan Rackspace CDN. CDN lain mungkin menawarkan fasilitas serupa untuk mengedit tajuk objek dan mengubah tipe konten, jadi mungkin Anda akan beruntung (dan memposting beberapa info tambahan di sini).

Untuk Aplikasi berbasis Java, tambahkan ini ke file web.xml Anda:

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

Periksa link ini .. Ini pasti akan menyelesaikan masalah Anda .. Ada banyak solusi untuk membuat panggilan lintas domain DAPATKAN Ajax TAPI PERMINTAAN POST UNTUK CROSS DOMAIN TERSELESAIKAN DI SINI . Aku butuh 3 hari untuk mengetahuinya.

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

Di file.php Anda dari request ajax, dapat mengatur nilai header.

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