Ładowanie czcionki z pochodzenia zostało zablokowane przez zasady współdzielenia zasobów między źródłami

Otrzymuję następujący błąd w kilku przeglądarkach Chrome, ale nie we wszystkich. Nie jestem do końca pewien, na czym polega problem w tym momencie.

Czcionka z pochodzenia „ https://ABCDEFG.cloudfront.net ” została zablokowana przed ładowaniem przez zasady współdzielenia zasobów między źródłami: Żądany zasób nie zawiera nagłówka „Access-Control-Allow-Origin”. Dlatego Origin „ https://sub.domain.com ” nie ma dostępu.

Mam następującą konfigurację CORS na S3

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

Prośba

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

Wszystkie inne żądania z Cloudfront / S3 działają poprawnie, w tym pliki JS.

Dodaj tę regułę do swojego .htaccess

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

jeszcze lepiej, jak sugeruje @david thomas, możesz użyć określonej wartości domeny, np

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

Chrome od ~ września / października 2014 r. Poddaje czcionki tym samym kontrolom CORS, co Firefox https://code.google.com/p/chromium/issues/detail?id=286681 . Jest dyskusja na ten temat na https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Biorąc pod uwagę, że w przypadku czcionek przeglądarka może przeprowadzić kontrolę wstępną , Twoja zasada S3 również wymaga nagłówka żądania cors . Możesz sprawdzić swoją stronę w, powiedzmy, Safari (która obecnie nie sprawdza czcionek za pomocą CORS) i Firefoksie (to robi), aby dokładnie sprawdzić, czy jest to opisany problem.

Zobacz odpowiedź na temat przepełnienia stosu na Amazon S3 CORS (Cross-Origin Resource Sharing) i ładowanie czcionek międzydomenowych przeglądarki Firefox, aby uzyskać szczegółowe informacje na temat Amazon S3 CORS.

Uwaga: ogólnie rzecz biorąc, ponieważ dotyczyło to tylko przeglądarki Firefox, więc może pomóc wyszukiwanie przeglądarki Firefox, a nie Chrome.

Udało mi się rozwiązać problem, po prostu dodając <AllowedMethod>HEAD</AllowedMethod>do polityki CORS łyżki S3.

Przykład:

<?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. Wybierz swoje wiadro
2. Kliknij właściwości w prawym górnym rogu
3. Uprawnienia => Edytuj konfigurację Cors => Zapisz
4. Zapisać

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

26 czerwca 2014 AWS wydało poprawne zachowanie Vary: Origin na CloudFront, więc teraz po prostu

Ustaw konfigurację CORS dla swojego zasobnika S3:

<AllowedOrigin>*</AllowedOrigin>

W CloudFront -> Distribution -> Behaviors dla tego źródła, użyj opcji Forward Headers: Whitelist i dodaj do białej listy nagłówek „Origin”.

Poczekaj około 20 minut, aż CloudFront propaguje nową regułę

Teraz Twoja dystrybucja CloudFront powinna buforować różne odpowiedzi (z odpowiednimi nagłówkami CORS) dla różnych nagłówków Origin klienta.

Jedyne, co mi się sprawdziło (prawdopodobnie dlatego, że miałem niespójności z użyciem www.):

Wklej to do swojego pliku .htaccess:

<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

Miałem ten sam problem i ten link zapewnił mi rozwiązanie:

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

Krótka wersja to:

1. Edytuj konfigurację S3 CORS (mój przykładowy kod nie wyświetlał się poprawnie)
   Uwaga: zostało to już zrobione w pierwotnym pytaniu
   Uwaga: podany kod nie jest zbyt bezpieczny, więcej informacji na podlinkowanej stronie.
2. Przejdź do karty „Zachowania” swojej dystrybucji i kliknij, aby edytować
3. Zmień opcję „Przekaż nagłówki” z „Brak (poprawia buforowanie)” na „Biała lista”.
4. Dodaj „Origin” do listy „Biała lista nagłówków”
5. Zapisz zmiany

Twoja dystrybucja w chmurze zostanie zaktualizowana, co zajmie około 10 minut. Potem wszystko powinno być dobrze, możesz zweryfikować, sprawdzając, czy komunikaty o błędach związane z CORS zniknęły z przeglądarki.

Dla osób używających produktów firmy Microsoft z plikiem web.config:

Połącz to z plikiem web.config.

Aby zezwolić na dowolnej domeny zastąpić value="domain"zvalue="*"

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

Jeśli nie masz uprawnień do edycji pliku web.config, dodaj tę linię w kodzie po stronie serwera.

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

Jest miły writeup tutaj .

Konfiguracja tego w nginx / apache jest błędem.
Jeśli korzystasz z firmy hostingowej, nie możesz skonfigurować krawędzi.
Jeśli używasz platformy Docker, aplikacja powinna być samodzielna.

Zauważ, że niektóre przykłady używają, connectHandlersale to ustawia tylko nagłówki w dokumencie. Użycie rawConnectHandlersdotyczy wszystkich obsługiwanych zasobów (czcionki / css / itp.).

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

To byłby dobry moment, aby przyjrzeć się zasadom przeglądarki, takim jak kadrowanie itp.

Po prostu dodaj użycie źródła w swoim, jeśli używasz node.js jako serwera ...

lubię to

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

Potrzebujemy odpowiedzi na pochodzenie

Rozwiązanie robocze dla Heroku jest tutaj http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (cytaty ):

Poniżej znajduje się dokładnie to, co możesz zrobić, jeśli używasz aplikacji Rails w Heroku i używasz Cloudfront jako CDN. Został przetestowany na Ruby 2.1 + Rails 4, Heroku Cedar.

Dodaj nagłówki HTTP CORS (Access-Control- *) do zasobów czcionek

• Dodaj klejnot font_assetsdo Gemfile.
• bundle install
• Dodaj config.font_assets.origin = '*'do config/application.rb. Jeśli chcesz bardziej szczegółowej kontroli, możesz dodać różne wartości pochodzenia do różnych środowisk, np.config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• Prześlij kod do Heroku.

Skonfiguruj Cloudfront do przekazywania nagłówków HTTP CORS

W Cloudfront wybierz swoją dystrybucję, w zakładce "zachowanie" wybierz i edytuj wpis kontrolujący dostarczanie czcionek (dla większości prostych aplikacji Railsowych masz tylko 1 wpis). Zmień Forward Headers z „None” na „Whilelist”. I dodaj następujące nagłówki do białej listy:

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

Zapisz to i to wszystko!

Uwaga: odkryłem, że czasami Firefox nie odświeża czcionek, nawet jeśli zniknął błąd CORS. W takim przypadku odśwież stronę kilka razy, aby przekonać Firefoksa, że ​​jesteś naprawdę zdeterminowany.