Orijinli yazı tipinin Kaynaklar Arası Kaynak Paylaşımı politikası tarafından yüklenmesi engellendi

Birkaç Chrome tarayıcıda aşağıdaki hatayı alıyorum, ancak hepsini almıyorum. Bu noktada sorunun tam olarak ne olduğundan emin değilim.

' Https://ABCDEFG.cloudfront.net ' kaynağından yazı tipinin Kaynaklar Arası Kaynak Paylaşımı politikası tarafından yüklenmesi engellendi: İstenen kaynakta 'Erişim-Denetim-İzin Verme Başlığı' başlığı yok. Bu nedenle ' https: //sub.etkialanı.com' kaynağına erişim izni verilmiyor.

S3'te aşağıdaki CORS Yapılandırması var

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Talep

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

Cloudfront / S3'ten gelen diğer tüm istekler, JS dosyaları dahil, düzgün çalışır.

Bu kuralı .htaccess'inize ekleyin

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

daha iyi, @ david thomas tarafından önerildiği gibi, belirli bir alan adı değeri kullanabilirsiniz,

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

~ Eylül / Ekim 2014'ten bu yana Chrome, Firefox'un https://code.google.com/p/chromium/issues/detail?id=286681 gibi aynı CORS kontrollerine tabi fontlar oluşturuyor . Bu konuda https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw adresinde bir tartışma var.

Fontlar için tarayıcının bir ön kontrol gerçekleştirebileceği göz önüne alındığında, S3 politikanızın cors istek başlığına da ihtiyacı var . Sayfanızı, (şu anda yazı tiplerini kontrol etmek için CORS yapmaz) ve Firefox'ta (bu yapar), bunun açıklanan sorun olduğunu iki kez kontrol ederek söyleyebilirsiniz.

Amazon S3 CORS ayrıntıları için Amazon S3 CORS (Kaynaklar Arası Kaynak Paylaşımı) ve Firefox siteler arası yazı tipi yüklemesinde yığın taşması yanıtı konusuna bakın.

Genel olarak not: çünkü bu yalnızca Firefox için geçerliydi, bu nedenle Chrome yerine Firefox aramaya yardımcı olabilir.

<AllowedMethod>HEAD</AllowedMethod>S3 Kovasının CORS politikasına ekleyerek sorunu çözebildim .

Misal:

<?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. Kepçenizi seçin
2. Sağ üstteki tıklama özellikleri
3. İzinler => Cors Yapılandırmasını Düzenle => Kaydet
4. Kayıt etmek

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

26 Haziran 2014'te AWS, CloudFront'da uygun Vary: Origin davranışını yayınladı, böylece şimdi

S3 grubunuz için bir CORS Yapılandırması ayarlayın:

<AllowedOrigin>*</AllowedOrigin>

Bu orijin için CloudFront -> Dağıtım -> Davranışlarda İleri Başlıkları: Beyaz Liste seçeneğini kullanın ve 'Origin' başlığını beyaz listeye ekleyin.

CloudFront yeni kuralı uygularken ~ 20 dakika bekleyin

Artık CloudFront dağıtımınız, farklı istemci Orijin başlıkları için farklı yanıtları (uygun CORS başlıklarıyla) önbelleğe almalıdır.

Benim için çalıştı tek şey (muhtemelen www. Kullanımı ile tutarsızlıklar vardı çünkü):

Bunu .htaccess dosyanıza yapıştırın:

<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

Aynı sorunu yaşadım ve bu bağlantı benim için çözüm sağladı:

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

Kısa versiyonu:

1. S3 CORS yapılandırmasını düzenle (kod örneğim düzgün görüntülenmedi)
   Not: Bu zaten orijinal soruda yapılmıştır
   Not: sağlanan kod çok güvenli değil, bağlı sayfada daha fazla bilgi.
2. Dağıtımınızın "Davranışlar" sekmesine gidin ve düzenlemek için tıklayın
3. "İletme Başlıkları" nı "Yok (Önbelleği Geliştirir)" olarak "Beyaz Liste" olarak değiştirin.
4. "Beyaz Liste Üstbilgileri" listesine "Kökeni" ekleyin
5. Değişiklikleri kaydedin

Cloudfront dağıtımınız güncellenir, bu yaklaşık 10 dakika sürer. Bundan sonra, her şey iyi olmalı, CORS ile ilgili hata mesajlarının tarayıcıdan gittiğini kontrol ederek doğrulayabilirsiniz.

Web.config dosyasıyla Microsoft ürünlerini kullananlar için:

Bunu web.config'nizle birleştirin.

Herhangi bir etki üzerinde izin vermek için değiştirmek value="domain"ilevalue="*"

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

Web.config dosyasını düzenleme izniniz yoksa, bu satırı sunucu tarafı kodunuza ekleyin.

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

Burada güzel bir yazı var .

Bunu nginx / apache'de yapılandırmak bir hatadır.
Bir hosting şirketi kullanıyorsanız, kenarı yapılandıramazsınız.
Docker kullanıyorsanız, uygulama kendi içinde olmalıdır.

Bazı örneklerin kullanıldığını unutmayın, connectHandlersancak bu yalnızca dokümanın üstbilgilerini ayarlar. Kullanımı, rawConnectHandlerssunulan tüm varlıklara (font / css / etc) uygulanır.

  // 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();
  });

Bu, çerçeveleme gibi tarayıcı politikasına bakmak için iyi bir zaman olacaktır .

Sunucu olarak node.js kullanıyorsanız menşeinizi kullanmanız yeterlidir ...

bunun gibi

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

Menşe için yanıt gerekiyor

Heroku için çalışma çözümü burada http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (tırnak işaretleri izleyin):

Aşağıda Rails uygulamanızı Heroku'da çalıştırıyorsanız ve Cloudfront'u CDN'niz olarak kullanıyorsanız tam olarak neler yapabilirsiniz. Ruby 2.1 + Rails 4, Heroku Cedar yığınında test edildi.

Font varlıklarına CORS HTTP üstbilgileri (Access-Control- *) ekleme

• font_assetsGemfile'a mücevher ekleyin.
• bundle install
• Ekle config.font_assets.origin = '*'için config/application.rb. Daha ayrıntılı denetim istiyorsanız, farklı ortama farklı başlangıç ​​değerleri ekleyebilirsiniz, ör.config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• Kodu Heroku'ya aktar.

Cloudfront'u CORS HTTP başlıklarını iletecek şekilde yapılandırma

Cloudfront'ta dağıtımınızı seçin, "davranış" sekmesi altında, yazı tipi dağıtımınızı kontrol eden girişi seçin ve düzenleyin (en basit Rails uygulaması için burada yalnızca 1 girişiniz vardır). Değişim İleri Başlıkları "Whilelist" için "Yok" dan. Ve beyaz listeye aşağıdaki başlıkları ekleyin:

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

Kaydet ve hepsi bu!

Dikkat: CORS hatası gitmiş olsa bile bazen Firefox'un yazı tiplerini yenilemeyeceğini fark ettim. Bu durumda, Firefox'u gerçekten belirlediğinize ikna etmek için sayfayı birkaç kez yenilemeye devam edin.