Font dari asal telah diblokir dari pemuatan oleh kebijakan Cross-Origin Resource Sharing

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.

Tambahkan aturan ini ke .htaccess Anda

Header add Access-Control-Allow-Origin "*" 

lebih baik lagi, seperti yang disarankan oleh @david thomas, Anda dapat menggunakan nilai domain tertentu, misalnya

Header add Access-Control-Allow-Origin "your-domain.com"

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.

Saya dapat menyelesaikan masalah hanya dengan menambahkan <AllowedMethod>HEAD</AllowedMethod>ke kebijakan CORS dari S3 Bucket.

Contoh:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Nginx:

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3:

1. Pilih ember Anda
2. Klik properti di kanan atas
3. Izin => Edit Konfigurasi Cors => Simpan
4. Menyimpan

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

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:

<AllowedOrigin>*</AllowedOrigin>

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.

Satu-satunya hal yang berhasil bagi saya (mungkin karena saya memiliki inkonsistensi dengan penggunaan www.):

Rekatkan ini ke file .htaccess Anda:

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

Saya memiliki masalah yang sama dan tautan ini memberikan solusi bagi saya:

http://www.holovaty.com/writing/cors-ie-cloudfront/

Versi singkatnya adalah:

1. Edit S3 CORS config (contoh kode saya tidak ditampilkan dengan benar)
   Catatan: Ini sudah dilakukan dalam pertanyaan awal
   Catatan: kode yang diberikan tidak terlalu aman, info lebih lanjut di halaman tertaut.
2. Buka tab "Perilaku" dari distribusi Anda dan klik untuk mengedit
3. Ubah "Teruskan Header" dari "Tidak Ada (Tingkatkan Caching)" ke "Daftar Putih."
4. Tambahkan "Asal" ke daftar "Daftar Putih Kepala"
5. Simpan perubahannya

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.

Bagi mereka yang menggunakan produk Microsoft dengan file web.config:

Gabungkan ini dengan web.config Anda.

Untuk mengizinkan ganti domain apa pun value="domain"denganvalue="*"

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="domain" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
</configuration>

Jika Anda tidak memiliki izin untuk mengedit web.config, kemudian tambahkan baris ini dalam kode sisi server Anda.

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

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 connectHandlerstetapi ini hanya menetapkan header pada doc. Penggunaan rawConnectHandlersberlaku untuk semua aset yang dilayani (font / css / dll).

  // HSTS only the document - don't function over http.  
  // Make sure you want this as it won't go away for 30 days.
  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); // 2592000s / 30 days
    next();
  });

  // CORS all assets served (fonts/etc)
  WebApp.rawConnectHandlers.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    return next();
  });

Ini akan menjadi saat yang tepat untuk melihat kebijakan peramban seperti pembingkaian, dll.

Cukup tambahkan penggunaan asal dalam Anda jika Anda menggunakan node.js sebagai server ...

seperti ini

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

Kami Membutuhkan respons untuk asal

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

• Tambahkan permata font_assetske Gemfile.
• bundle install
• Tambahkan config.font_assets.origin = '*'ke config/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
• Dorong kode ke Heroku.

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:

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

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.