Die Schriftart aus dem Ursprung wurde durch Cross-Origin Resource Sharing-Richtlinien vom Laden blockiert
Ich erhalte folgende Fehler auf ein paar Chrome-Browser, aber nicht alle. Nicht ganz sicher, was das Problem ist an dieser Stelle.
Schrift vom Ursprung 'https://ABCDEFG.cloudfront.net' wurde blockiert das laden von Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' - header vorhanden ist, auf die angeforderte Ressource. Herkunft 'https://sub.domain.com' ist daher nicht der Zugriff erlaubt.
Habe ich die folgenden CORS-Konfiguration auf S3
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedHeader>*</AllowedHeader>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Antrag
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
Alle anderen Anfragen von Cloudfront/S3 richtig funktioniert, einschließlich JS-Dateien.
InformationsquelleAutor der Frage Dallas Clark | 2014-08-30
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fügen Sie diese Regel, um Ihre .htaccess
sogar besser, wie vorgeschlagen von @david thomas, können Sie die Verwendung eines bestimmten domain-Wert, z.B.
InformationsquelleAutor der Antwort Giovanni Di Gregorio
Chrome seit ~September/Oktober 2014 macht die Schriften unterliegen den gleichen CORS-checks wie Firefox getan hat https://code.google.com/p/chromium/issues/detail?id=286681. Es ist eine Diskussion auf dieser in https://groups.google.com/a/chromium.org/forum/?fromgroups=#!Thema/blink-dev/TT9D5-Zfnzw
Gegeben, dass die Schriftarten der browser kann tun, eine preflight-checkdann ist dein S3 Politik muss die cors-request-header als auch. Sie können überprüfen Sie Ihre Seite in der sagen-Safari (die derzeit nicht tun CORS überprüfung für die Schrift) und Firefox (funktioniert) noch einmal zu überprüfen dies ist das problem beschrieben.
Finden Sie unter Stack overflow-Antwort auf Amazon S3 CORS (Cross-Origin Resource Sharing) und Firefox-cross-domain-schriftart laden für die Amazon S3-CORS details.
NB im Allgemeinen, weil diese anwenden verwendet, um nur Firefox, so kann es helfen, um die Suche für Firefox statt Chrome.
InformationsquelleAutor der Antwort Tim Diggins
War ich in der Lage das problem zu lösen, indem Sie einfach
<AllowedMethod>HEAD</AllowedMethod>
auf die CORS-Politik der S3-Bucket.Beispiel:
InformationsquelleAutor der Antwort Özer S.
Nginx:
AWS S3:
http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/
InformationsquelleAutor der Antwort Yaniv Vova Alterman
Am Juni 26, 2014 AWS veröffentlicht ordnungsgemäße Variieren: Herkunft, Verhalten auf CloudFront, so dass Sie jetzt nur
Set ein CORS-Konfiguration für Ihren S3-bucket:
In der CloudFront -> Distribution> Verhalten für dieses Ursprungs, verwenden Sie die Forward-Header: Whitelist-option und die whitelist 'Origin' - header.
Warten ~20 Minuten, während CloudFront verbreitet die neue Regel
Nun Ihre CloudFront-Verteilung Zwischenspeichern soll, unterschiedliche Antworten (mit der richtigen CORS-Header) für die verschiedenen client-Origin-Header.
InformationsquelleAutor der Antwort KBH
Das einzige, was für mich gearbeitet hat (wahrscheinlich, weil ich hatte Unstimmigkeiten mit www. Nutzung):
Fügen Sie diesen in Ihr .htaccess-Datei:
http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts
InformationsquelleAutor der Antwort Luigi04
Ich hatte das gleiche problem und dieser link die Lösung für mich:
http://www.holovaty.com/writing/cors-ie-cloudfront/
Die kurze version ist:
Hinweis: Dies geschieht bereits in der ursprünglichen Frage
Hinweis: der code ist nicht sehr sicher, mehr Infos in der verlinkten Seite.
Ihre cloudfront-Verteilung wird aktualisiert, das dauert etwa 10 Minuten. Danach sollte alles gut sein, können Sie überprüfen, indem Sie überprüfen, dass die CORS-bezogene Fehlermeldungen sind Weg aus dem browser.
InformationsquelleAutor der Antwort agbodike
Gibt es einen interessanten Kommentar hier.
Konfigurieren Sie diesen in der nginx/apache ist ein Fehler.
Wenn Sie ein hosting-Unternehmen, Sie können nicht konfigurieren Sie den edge.
Wenn Sie das Andockfenster, sollte die app selbst enthalten.
Beachten Sie, dass einige Beispiele verwenden
connectHandlers
aber das legt nur der Header an den doc. MitrawConnectHandlers
gilt für alle Vermögenswerte serviert (Schriften/css/etc).Wäre dies ein guter Zeitpunkt, zu schauen, browser-Politik wie framing, etc.
InformationsquelleAutor der Antwort Michael Cole
Für diejenigen, die mit Microsoft-Produkten mit einer web.config-Datei:
Verschmelzen diese mit Ihrer Website.config.
Wenn Sie nicht über die Berechtigung zum Bearbeiten der web.config, dann fügen Sie diese Zeile in Ihre server-side-code.
InformationsquelleAutor der Antwort nu everest
Funktionierende Lösung für heroku ist hier http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html
(Angebote Folgen):
Unten ist genau das, was Sie tun können, wenn Sie Ihre Rails-app auf Heroku und mit Cloudfront als Ihre EUR. Getestet wurde es auf Ruby 2.1 + Schienen 4, Heroku Cedar stack.
Hinzufügen CORS-HTTP-Header ("Access-Control-*) font Vermögenswerte
font_assets
zu Gemfile .bundle install
config.font_assets.origin = '*'
zuconfig/application.rb
. Wenn Sie wollen mehr granulare Kontrolle, die Sie hinzufügen können verschiedenen Ursprungs Werte zu anderen Umfeld, z.B.config/config/environments/production.rb
curl -I http://localhost:3000/assets/your-custom-font.ttf
Konfigurieren Cloudfront vorwärts CORS-HTTP-Header
In Cloudfront, wählen Sie Ihre distribution, die unter "Verhalten" - Registerkarte, wählen Sie und Bearbeiten Sie den Eintrag, der steuert, Schriftarten, Lieferung (für die meisten einfachen Rails-app, die Sie haben nur 1 Eintrag hier). Ändern Forward-Header von "None" auf "Whilelist". Und fügen Sie die folgende Header-whitelist:
Speichern Sie es und das ist es!
Caveat: ich fand, dass manchmal der Firefox wäre nicht nicht aktualisieren Sie die Schriftarten, auch wenn CORS Fehler ist Weg. Halten Sie In diesem Fall die Seite aktualisieren, ein paar mal zu überzeugen, Firefox, Sie sind wirklich entschlossen.
InformationsquelleAutor der Antwort mihserf