it-swarm.com.de

Das Laden von Zeichensätzen aus Origin wurde durch die Cross-Origin-Richtlinie zur gemeinsamen Nutzung von Ressourcen blockiert

Ich erhalte die folgende Fehlermeldung in einigen Chrome Browsern, aber nicht in allen. Ich bin mir nicht ganz sicher, worum es an diesem Punkt geht.

Schriftart aus Origin ' https://ABCDEFG.cloudfront.net ' wurde durch die Cross-Origin-Richtlinie zur gemeinsamen Nutzung von Ressourcen am Laden gehindert: Auf der angeforderten Seite ist kein Header für 'Zugriffskontrolle-Zulassen-Origin' vorhanden Ressource. 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, einschließlich JS-Dateien, funktionieren ordnungsgemäß.

152
Dallas Clark

Fügen Sie diese Regel zu Ihrem . Htaccess hinzu

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

noch besser ist es, wenn Sie, wie von @david thomas vorgeschlagen, einen bestimmten Domain-Wert verwenden, z.

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

Chrome unterliegt seit ~ Sep/Oct 2014 denselben CORS-Prüfungen wie Firefox https://code.google.com/p/chromium/issues/detail?id=286681 . Eine Diskussion hierzu finden Sie in https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Vorausgesetzt, dass der Browser für Schriftarten möglicherweise ein Preflight-Prüfung ausführt, dann Ihre S3-Richtlinie benötigt 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 es) ü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 am Laden domänenübergreifender Amazon S3 CORS-Schriftarten (Cross-Origin Resource Sharing) und Firefox .

NB im Allgemeinen, da dies früher nur für Firefox galt. Daher kann es hilfreich sein, nach Firefox und nicht nach Chrome zu suchen.

57
Tim Diggins

Ich konnte das Problem lösen, indem ich einfach <AllowedMethod>HEAD</AllowedMethod> zur CORS-Richtlinie des S3-Buckets hinzufügte.

Beispiel:

<?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>
44
Özer S.

Nginx:

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3:

  1. Wählen Sie Ihren Eimer
  2. Klicken Sie oben rechts auf Eigenschaften
  3. Berechtigungen => Cors-Konfiguration bearbeiten => Speichern
  4. Sparen

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

29

Am 26. Juni 2014 hat AWS das korrekte Verhalten von Vary: Origin auf CloudFront veröffentlicht

Legen Sie eine CORS-Konfiguration für Ihren S3-Bucket fest:

<AllowedOrigin>*</AllowedOrigin>

Verwenden Sie in CloudFront -> Verteilung -> Verhalten für diesen Ursprung die Option Header weiterleiten: Whitelist und die Option 'Origin' als 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.

12
KBH

Das Einzige, was bei mir funktioniert hat (wahrscheinlich, weil ich Inkonsistenzen mit der Nutzung von www hatte):

Fügen Sie dies in Ihre .htaccess-Datei ein:

<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

4
Luigi04

Ich hatte das gleiche Problem und dieser Link bot mir die Lösung:

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

Die Kurzversion davon ist:

  1. S3-CORS-Konfiguration bearbeiten (mein Codebeispiel wurde nicht richtig angezeigt)
    Hinweis: Dies ist in der ursprünglichen Frage bereits geschehen
    Hinweis: Der bereitgestellte Code ist nicht sehr sicher. Weitere Informationen finden Sie auf der verlinkten Seite.
  2. Gehen Sie zur Registerkarte "Verhalten" Ihrer Distribution und klicken Sie auf "Bearbeiten"
  3. Ändern Sie "Forward Headers" von "None (Improves Caching)" in "Whitelist".
  4. Fügen Sie "Origin" zur Liste "Whitelist Headers" hinzu
  5. Speichern Sie die Änderungen

Die Aktualisierung Ihrer Cloudfront-Distribution dauert ca. 10 Minuten. Danach sollte alles in Ordnung sein. Überprüfen Sie, ob die CORS-bezogenen Fehlermeldungen vom Browser verschwunden sind.

3
agbodike

Es gibt eine nette Zusammenfassung hier .

Dies in nginx/Apache zu konfigurieren ist ein Fehler.
Wenn Sie ein Hosting-Unternehmen verwenden, können Sie den Edge nicht konfigurieren.
Wenn Sie Docker verwenden, sollte die App in sich geschlossen sein.

Beachten Sie, dass in einigen Beispielen connectHandlers verwendet wird, hierdurch jedoch nur die Kopfzeilen im Dokument festgelegt werden. Die Verwendung von rawConnectHandlers gilt für alle bereitgestellten Elemente (Schriftarten/CSS/usw.).

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

Dies wäre ein guter Zeitpunkt, um Browser-Richtlinie wie Framing usw. zu betrachten.

1
Michael Cole

Für Benutzer von Microsoft-Produkten mit einer web.config-Datei:

Führen Sie dies mit Ihrer web.config zusammen.

Ersetzen Sie value="domain" durch value="*", um dies in jeder Domain zuzulassen.

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

Wenn Sie keine Berechtigung zum Bearbeiten von web.config haben, fügen Sie diese Zeile in Ihren serverseitigen Code ein.

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