Bei einigen Chrome-Browsern wird der folgende Fehler angezeigt, jedoch nicht bei allen. Ich bin mir nicht ganz sicher, worum es derzeit geht.
Die Schriftart vom Ursprung ' https://ABCDEFG.cloudfront.net ' wurde durch die Richtlinie zur gemeinsamen Nutzung von Ressourcen zwischen verschiedenen Ursprüngen blockiert: Für die angeforderte Ressource ist kein Header 'Zugriffssteuerung-Zulassen-Ursprung' vorhanden. Origin ' https://sub.domain.com ' ist daher kein Zugriff gestattet.
Ich habe die folgende CORS-Konfiguration auf S3
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedHeader>*</AllowedHeader>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Die Anfrage
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 Anforderungen von Cloudfront / S3 funktionieren ordnungsgemäß, einschließlich JS-Dateien.
amazon-web-services
amazon-s3
cors
amazon-cloudfront
Dallas Clark
quelle
quelle
Antworten:
Fügen Sie diese Regel Ihrem .htaccess hinzu
noch besser, wie von @david thomas vorgeschlagen, können Sie einen bestimmten Domänenwert verwenden, z
quelle
Header set Access-Control-Allow-Origin "*"
? DankeAccess-Control-Allow-Origin "*"
ist möglicherweise unsicher, da die Domain für den Javascript-Zugriff von jeder Domain aus geöffnet wird. Sie sollten stattdessen einen bestimmten Domänenwert verwenden, zAccess-Control-Allow-Origin "http://example1.com"
. B. eine gute Erklärung finden Sie auch unter stackoverflow.com/a/10636765/583715 .In Chrome werden Schriftarten seit ~ Sep / Okt 2014 denselben CORS-Prüfungen unterzogen wie Firefox unter https://code.google.com/p/chromium/issues/detail?id=286681 . Eine Diskussion hierzu finden Sie unter https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw
Da der Browser für Schriftarten möglicherweise eine Preflight-Prüfung durchführt , benötigt Ihre S3-Richtlinie auch den cors-Anforderungsheader . Sie können Ihre Seite in Safari (das derzeit keine CORS-Prüfung auf Schriftarten durchführt) und Firefox (das tut dies) überprüfen, um zu überprüfen, ob dies das beschriebene Problem ist.
Weitere Informationen zu Amazon S3 CORS finden Sie unter Antwort auf Stapelüberlauf beim Amazon S3 CORS (Cross-Origin Resource Sharing) und beim domänenübergreifenden Laden von Firefox-Schriftarten .
Hinweis im Allgemeinen, da dies früher nur für Firefox galt. Daher kann es hilfreich sein, nach Firefox und nicht nach Chrome zu suchen.
quelle
Ich konnte das Problem lösen, indem ich einfach
<AllowedMethod>HEAD</AllowedMethod>
die CORS-Richtlinie des S3-Buckets hinzufügte .Beispiel:
quelle
<AllowedMethod>HEAD</AllowedMethod>
meine CORS-Richtlinie für den Bucket hinzugefügt und sie funktioniert immer noch nicht.Nginx:
AWS S3:
http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/
quelle
Am 26. Juni 2014 hat AWS das richtige Vary: Origin-Verhalten auf CloudFront veröffentlicht
Legen Sie eine CORS-Konfiguration für Ihren S3-Bucket fest:
Verwenden Sie in CloudFront -> Verteilung -> Verhalten für diesen Ursprung die Option "Header weiterleiten: Whitelist" und den Header "Ursprung" auf die Whitelist.
Warten Sie ca. 20 Minuten, während CloudFront die neue Regel weitergibt
Jetzt sollte Ihre CloudFront-Distribution verschiedene Antworten (mit geeigneten CORS-Headern) für verschiedene Client-Origin-Header zwischenspeichern.
quelle
Das einzige, was für mich funktioniert hat (wahrscheinlich, weil ich Inkonsistenzen mit der WWW-Nutzung hatte):
Fügen Sie dies in Ihre .htaccess-Datei ein:
http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts
quelle
Ich hatte das gleiche Problem und dieser Link bot die Lösung für mich:
http://www.holovaty.com/writing/cors-ie-cloudfront/
Die Kurzversion davon ist:
Hinweis: Dies wurde bereits in der ursprünglichen Frage durchgeführt.
Hinweis: Der bereitgestellte Code ist nicht sehr sicher. Weitere Informationen finden Sie auf der verlinkten Seite.
Ihre Cloudfront-Distribution wird aktualisiert, was ungefähr 10 Minuten dauert. Danach sollte alles in Ordnung sein. Sie können überprüfen, ob die CORS-bezogenen Fehlermeldungen vom Browser entfernt wurden.
quelle
Für Benutzer von Microsoft-Produkten mit einer web.config-Datei:
Führen Sie dies mit Ihrer web.config zusammen.
Wenn Sie keine Berechtigung zum Bearbeiten von web.config haben, fügen Sie diese Zeile in Ihren serverseitigen Code ein.
quelle
Es gibt einen schönen writeup hier .
Die Konfiguration in Nginx / Apache ist ein Fehler.
Wenn Sie ein Hosting-Unternehmen verwenden, können Sie den Edge nicht konfigurieren.
Wenn Sie Docker verwenden, sollte die App eigenständig sein.
Beachten Sie, dass einige Beispiele verwenden
connectHandlers
, dies jedoch nur Header im Dokument festlegt. Die VerwendungrawConnectHandlers
gilt für alle bereitgestellten Assets (Schriftarten / CSS / usw.).Dies wäre ein guter Zeitpunkt, um sich die Browser-Richtlinien wie Framing usw. anzusehen .
quelle
Fügen Sie einfach die Verwendung von origin in Ihre hinzu, wenn Sie node.js als Server verwenden ...
quelle
Die Arbeitslösung für Heroku finden Sie hier http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (Zitate folgen):
Im Folgenden finden Sie genau das, was Sie tun können, wenn Sie Ihre Rails-App in Heroku ausführen und Cloudfront als CDN verwenden. Es wurde auf Ruby 2.1 + Rails 4, Heroku Cedar Stack getestet.
Fügen Sie den Schriftarten Assets CORS HTTP-Header (Access-Control- *) hinzu
font_assets
zu Gemfile.bundle install
config.font_assets.origin = '*'
zuconfig/application.rb
. Wenn Sie eine detailliertere Steuerung wünschen, können Sie verschiedenen Umgebungen unterschiedliche Ursprungswerte hinzufügen, z.config/config/environments/production.rb
curl -I http://localhost:3000/assets/your-custom-font.ttf
Konfigurieren Sie Cloudfront für die Weiterleitung von CORS-HTTP-Headern
Wählen Sie in Cloudfront Ihre Distribution aus, wählen Sie auf der Registerkarte "Verhalten" den Eintrag aus und bearbeiten Sie ihn, der die Übermittlung Ihrer Schriftarten steuert (für die meisten einfachen Rails-Apps haben Sie hier nur einen Eintrag). Ändern Sie die Weiterleitungsüberschriften von "Keine" in "Whilelist". Fügen Sie der Whitelist die folgenden Header hinzu:
Speichern Sie es und das war's!
Vorsichtsmaßnahme: Ich habe festgestellt, dass Firefox die Schriftarten manchmal nicht aktualisiert, selbst wenn der CORS-Fehler behoben ist. In diesem Fall aktualisieren Sie die Seite einige Male, um Firefox davon zu überzeugen, dass Sie wirklich entschlossen sind.
quelle