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

159

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.

Dallas Clark
sumber
5
Saya mengalami masalah yang sama ... Saya mulai memperhatikannya setelah memutakhirkan ke chrome 37.0.2062.94
kirley
Setelah memperbarui Konfigurasi CORS, saya mengganti nama aset dan berhasil membuatnya berfungsi. Jadi 1) Konfigurasi CORS diterapkan hanya pada pembuatan file (bukan pembaruan) ATAU 2) Konfigurasi CORS di-cache di Cloudfront. Saya akan memposting ini sebagai jawaban jika orang lain dapat mengonfirmasi itu juga berlaku untuk mereka.
Dallas Clark
1
Hanya perhatikan ini dengan Chrome v. 37.0.2062.94 tetapi bukan versi sebelumnya. Saya tidak memiliki konfigurasi CORS sama sekali pada S3, jadi ini seharusnya tidak terjadi, bukan?
Ghopper21
1
@ Ghopper21 Anda memerlukan konfigurasi CORS yang tepat. Tes di firefox dan itu akan memberi Anda (mungkin) hasil yang sama.
Tim Diggins
1
@RichPeck - perbaiki dengan menambahkan konfigurasi CORS yang benar ke S3 (atau jika secara otomatis membuat CDN Anda dari sumber, maka itu sedikit lebih rumit - Anda harus menambahkan header yang sesuai, kemudian membatalkan font cache Anda) ... stackoverflow.com / pertanyaan / 12229844 / ... lihat jawaban di bawah ini untuk lebih jelasnya
Tim Diggins

Jawaban:

87

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"
Giovanni Di Gregorio
sumber
1
Hai, apa bedanya dengan Header set Access-Control-Allow-Origin "*"? Terima kasih
NineCattoRules
8
untuk windows people, atur <add name = "Access-Control-Allow-Origin" value = "*" /> di bawah <customHeaders> dalam file web.config. Semoga harimu menyenangkan
Arsalan Saleem
2
@Simone perbedaannya adalah bahwa dengan "menambahkan" header respons ditambahkan ke set header yang ada, bahkan jika header ini sudah ada. Ini dapat menyebabkan dua (atau lebih) header memiliki nama yang sama; sedangkan dengan "set" tajuk respons diatur, mengganti tajuk sebelumnya dengan nama ini. Dalam hal ini penyebab yang sama * termasuk semuanya.
Giovanni Di Gregorio
@GiovanniDiGregorio Terima kasih atas info yang bagus!
NineCattoRules
21
Hanya mencatat Access-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.
David Thomas
59

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.

Tim Diggins
sumber
Terima kasih atas jawaban ini, sepertinya itu menjadi masalah bagi banyak orang lain. Meskipun masalah saya terjadi pada pembuatan Chrome yang stabil.
Dallas Clark
45
Ini sedang terjadi di Chrome sekarang.
justingordon
Karena orang terus merujuk (termasuk saya!) Ke jawaban ini, saya membuatnya kurang historis dan lebih relevan untuk hari ini.
Tim Diggins
1
Juga FYI saya menemukan bahwa pesan kesalahan "telah diblokir dari pemuatan oleh kebijakan Berbagi Sumber Daya Lintas-Negara: Tidak ada tajuk 'Akses-Kontrol-Bolehkan-Asal' hadir pada sumber daya yang diminta. Asal" sebenarnya berkaitan dengan memiliki yang buruk jalur ke file font di server asli saya, dan cloudfront kemudian mengarahkan ulang ke beranda server saya (dan baik tanggapan pengalihan atau beranda tidak memiliki header CORS). Membingungkan, tetapi diselesaikan dengan menggunakan jalur yang benar ke file font yang sebenarnya (bukan masalah CORS, sebenarnya).
Tim Diggins
Hai @DallasClark, Anda mungkin ingin memilih jawaban yang diterima untuk pertanyaan Anda. Terima kasih Tim, tautan dan penjelasan Anda sangat membantu dalam pengalaman saya. Bersulang.
Dan
46

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>
Özer S.
sumber
tidak yakin tentang keamanan, akan lebih baik jika seseorang memiliki beberapa masukan tentang itu ..
Özer S.
Apakah perubahan ini perlu waktu untuk disebarkan? Saya baru saja menambahkan <AllowedMethod>HEAD</AllowedMethod>ke kebijakan CORS saya di ember dan itu masih tidak berfungsi.
Salvatore Iovene
biasanya tidak, harus maksimal. beberapa menit
Özer S.
12

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.

KBH
sumber
1
Ini sepertinya tidak berhasil, apakah Anda memiliki lebih banyak detail? Saya mengaktifkan ini tetapi saya masih mendapatkan masalah yang sama persis.
Jaco Pretorius
7

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

Luigi04
sumber
1
Luar biasa! Terima kasih banyak!
Rotimi
1
Karena kode Anda diperinci, butuh beberapa waktu bagi saya untuk melewatinya, saya belajar beberapa hal. Saya menerapkan sebagian untuk mengubah solusi saya. Itu berhasil.
Mohammed Moinuddin Waseem
3

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.

agbodike
sumber
2

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");
nu everest
sumber
Pantas memilih untuk mengingat kami pengguna Windows.
mohrtan
Saya menggunakan inti asp.net, bagaimana cara menambahkan ini ke file appsettings.json?
Yusuff Sodiq
1

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.

Michael Cole
sumber
0

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

Daksh Patel
sumber
-5

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.

mihserf
sumber
4
Harap hindari jawaban hanya tautan. Akan sangat membantu jika Anda dapat menyalin cuplikan yang relevan dari artikel yang ditautkan ke dalam jawaban Anda. Terima kasih.
bPratik