Saya menerima kesalahan berikut pada beberapa browser Chrome tetapi tidak semua. Tidak sepenuhnya yakin apa masalahnya saat ini.
Fon dari asal ' https://ABCDEFG.cloudfront.net ' telah diblokir dari pemuatan oleh kebijakan Berbagi Sumber Daya Lintas-Negara: Tidak ada tajuk 'Akses-Kontrol-Bolehkan-Asal' hadir di sumber daya yang diminta. Karena itu, ' https://sub.domain.com ' tidak diizinkan untuk mengakses.
Saya memiliki Konfigurasi CORS berikut pada S3
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedHeader>*</AllowedHeader>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Permintaan
Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36
Semua permintaan lain dari Cloudfront / S3 berfungsi dengan baik, termasuk file JS.
amazon-web-services
amazon-s3
cors
amazon-cloudfront
Dallas Clark
sumber
sumber
Jawaban:
Tambahkan aturan ini ke .htaccess Anda
lebih baik lagi, seperti yang disarankan oleh @david thomas, Anda dapat menggunakan nilai domain tertentu, misalnya
sumber
Header set Access-Control-Allow-Origin "*"
? Terima kasihAccess-Control-Allow-Origin "*"
berpotensi tidak aman karena membuka domain untuk mengakses javascript dari domain apa pun. Anda harus menggunakan nilai domain tertentu sebagai gantinya, mis.Access-Control-Allow-Origin "http://example1.com"
Lihat juga stackoverflow.com/a/10636765/583715 untuk penjelasan yang baik.Chrome sejak ~ Sep / Oktober 2014 membuat font tunduk pada pemeriksaan CORS yang sama seperti Firefox telah melakukan https://code.google.com/p/chromium/issues/detail?id=286681 . Ada diskusi tentang ini di https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw
Mengingat bahwa untuk font browser dapat melakukan pemeriksaan preflight , maka kebijakan S3 Anda juga perlu tajuk permintaan kors . Anda dapat memeriksa halaman Anda di katakanlah Safari (yang saat ini tidak melakukan CORS memeriksa font) dan Firefox (yang tidak) untuk memeriksa ulang ini adalah masalah yang dijelaskan.
Lihat jawaban stack overflow pada Amazon S3 CORS (Cross-Origin Resource Sharing) dan pemuatan font lintas-domain Firefox untuk detail Amazon S3 CORS.
NB secara umum karena ini dulu hanya berlaku untuk Firefox, jadi mungkin membantu untuk mencari Firefox daripada Chrome.
sumber
Saya dapat menyelesaikan masalah hanya dengan menambahkan
<AllowedMethod>HEAD</AllowedMethod>
ke kebijakan CORS dari S3 Bucket.Contoh:
sumber
<AllowedMethod>HEAD</AllowedMethod>
ke kebijakan CORS saya di ember dan itu masih tidak berfungsi.Nginx:
AWS S3:
http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/
sumber
Pada tanggal 26 Juni 2014 AWS merilis Vary: Origin behaviour yang tepat di CloudFront, jadi sekarang Anda baru saja
Atur Konfigurasi CORS untuk bucket S3 Anda:
Di CloudFront -> Distribusi -> Perilaku untuk asal ini, gunakan opsi Maju Header: Daftar Putih dan daftar putih tajuk 'Asal'.
Tunggu ~ 20 menit sementara CloudFront menyebarkan aturan baru
Sekarang distribusi CloudFront Anda harus menyimpan respons yang berbeda (dengan header CORS yang tepat) untuk header Asal klien yang berbeda.
sumber
Satu-satunya hal yang berhasil bagi saya (mungkin karena saya memiliki inkonsistensi dengan penggunaan www.):
Rekatkan ini ke file .htaccess Anda:
http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts
sumber
Saya memiliki masalah yang sama dan tautan ini memberikan solusi bagi saya:
http://www.holovaty.com/writing/cors-ie-cloudfront/
Versi singkatnya adalah:
Catatan: Ini sudah dilakukan dalam pertanyaan awal
Catatan: kode yang diberikan tidak terlalu aman, info lebih lanjut di halaman tertaut.
Distribusi cloudfront Anda akan diperbarui, yang membutuhkan waktu sekitar 10 menit. Setelah itu, semua akan baik-baik saja, Anda dapat memverifikasi dengan memeriksa bahwa pesan kesalahan terkait CORS hilang dari browser.
sumber
Bagi mereka yang menggunakan produk Microsoft dengan file web.config:
Gabungkan ini dengan web.config Anda.
Jika Anda tidak memiliki izin untuk mengedit web.config, kemudian tambahkan baris ini dalam kode sisi server Anda.
sumber
Ada Langgan yang bagus di sini .
Mengkonfigurasi ini di nginx / apache adalah kesalahan.
Jika Anda menggunakan perusahaan hosting, Anda tidak dapat mengonfigurasi tepi.
Jika Anda menggunakan Docker, aplikasi tersebut harus lengkap.
Perhatikan bahwa beberapa contoh menggunakan
connectHandlers
tetapi ini hanya menetapkan header pada doc. PenggunaanrawConnectHandlers
berlaku untuk semua aset yang dilayani (font / css / dll).Ini akan menjadi saat yang tepat untuk melihat kebijakan peramban seperti pembingkaian, dll.
sumber
Cukup tambahkan penggunaan asal dalam Anda jika Anda menggunakan node.js sebagai server ...
sumber
Solusi yang berhasil untuk heroku ada di sini http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (kutipan ikuti):
Di bawah ini adalah persis apa yang dapat Anda lakukan jika Anda menjalankan aplikasi Rails Anda di Heroku dan menggunakan Cloudfront sebagai CDN Anda. Itu diuji pada Ruby 2.1 + Rails 4, Heroku Cedar stack.
Tambahkan header HTTP CORS (Access-Control- *) ke aset font
font_assets
ke Gemfile.bundle install
config.font_assets.origin = '*'
keconfig/application.rb
. Jika Anda ingin lebih banyak kontrol granular, Anda dapat menambahkan nilai asal yang berbeda ke lingkungan yang berbeda, misalnya,config/config/environments/production.rb
curl -I http://localhost:3000/assets/your-custom-font.ttf
Konfigurasikan Cloudfront untuk meneruskan header HTTP CORS
Di Cloudfront, pilih distribusi Anda, di bawah tab "behaviour", pilih dan edit entri yang mengontrol pengiriman font Anda (untuk sebagian besar aplikasi Rails sederhana, Anda hanya memiliki 1 entri di sini). Ubah Forward Header dari "None" ke "Whilelist". Dan tambahkan header berikut ke daftar putih:
Simpan itu dan hanya itu!
Peringatan: Saya menemukan bahwa kadang-kadang Firefox tidak akan menyegarkan kembali font bahkan jika kesalahan CORS hilang. Dalam hal ini, terus menyegarkan halaman beberapa kali untuk meyakinkan Firefox bahwa Anda benar-benar ditentukan.
sumber