Am'm a primit următorul mesaj de eroare pe un cuplu de Chrome, dar nu toate. Nu sunt sigur în întregime ceea ce este problema în acest moment.
Font de origine 'https://ABCDEFG.cloudfront.net' a fost blocat de încărcare de Cross-Origin Resource Sharing politica: Nu 'Access-Control-Allow-Origin' antet este prezent pe resursa solicitată. Originea 'https://sub.domain.com' este, prin urmare, nu este permis accesul.
Am urmatoarele CORS de Configurare de pe S3
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedHeader>*</AllowedHeader>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Cererea
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
Toate celelalte cereri de Cloudfront/S3 funcționează în mod corespunzător, inclusiv JS fișiere.
Se adaugă la această regulă ta .htaccess
Header add Access-Control-Allow-Origin "*"
chiar mai bine, cum a sugerat de către @david thomas, puteți folosi un anumit domeniu valoare, de exemplu
Header add Access-Control-Allow-Origin "your-domain.com"
Chrome deoarece ~Sep/Oct 2014 face fonturi supuse acelorași CORS controale ca Firefox a făcut https://code.google.com/p/chromium/issues/detail?id=286681. Există o discuție în acest sens în https://groups.google.com/a/chromium.org/forum/?fromgroups=#!subiect/blink-dev/TT9D5-Zfnzw
Având în vedere că pentru fonturi browser-ul poate face o jackson, atunci S3 politica are nevoie de cor antet cerere precum. Puteți verifica pagină în Safari (care în prezent nu't face CORS de verificare pentru fonturi) și Firefox (care) să verificați acest lucru este problema descrisă.
Vezi Stack overflow răspunsul pe https://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa pentru Amazon S3 CORS detalii.
NB, în general, pentru că acest lucru utilizate pentru a aplica la Firefox numai, așa că poate ajuta să căutați pentru Firefox, mai degrabă decât Chrome.
Am fost în măsură să rezolve problema pur și simplu prin adăugarea de <AllowedMethod>CAP</AllowedMethod>
a COR politica de Găleată S3.
Exemplu:
<?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:
http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/
Pe iunie 26, 2014 AWS lansat buna Varia: Originea comportamentului pe CloudFront acum nu
Setați un COR de Configurare pentru găleată S3:
<AllowedOrigin>*</AllowedOrigin>
În CloudFront -> Distribuție -> Comportamente de această origine, utilizați Înainte Antete: Albă opțiune și albă ca 'Originea' antet.
Așteptați pentru ~20 de minute în timp ce CloudFront propagă noua regula
Acum CloudFront de distribuție ar trebui să cache răspunsuri diferite (cu buna CORS antete) pentru diferite client de Origine antete.
Singurul lucru care a lucrat pentru mine (probabil pentru că am avut neconcordanțe cu www. de utilizare):
Inserați acest lucru în a ta .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
Am avut aceeasi problema, iar link-ul oferit soluția pentru mine:
http://www.holovaty.com/writing/cors-ie-cloudfront/
Pe scurt este:
Ta cloudfront de distribuție va actualiza, care durează aproximativ 10 minute. După aceea, toate ar trebui să fie bine, puteți verifica prin verificarea că CORS legate de mesajele de eroare sunt plecat din browser.
Pentru cei care folosesc produse Microsoft cu un web.config:
Merge cu dvs. de web.config.
Pentru a permite în orice domeniu înlocui
valoare="domeniu" " cu " valoare="*"
<?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>
Dacă tu nu't au permisiunea de a edita web.config, apoi adăugați această linie în cod server-side.
Response.AppendHeader("Access-Control-Allow-Origin", "domain");
Există o writeup frumos aici.
Configurarea acest lucru în nginx/apache este o greșeală. Dacă utilizați o companie de hosting puteți't configura margine. Dacă utilizați Docker, aplicația ar trebui să fie de sine stătătoare.
Rețineți că unele exemple de utilizare connectHandlers
dar aceasta stabilește doar anteturile de pe doc. Folosind rawConnectHandlers
se aplică tuturor activelor servit (fonturi/css/etc).
// 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();
});
Acest lucru ar fi un moment bun să se uite la a browser-politică ca încadrare, etc.
Soluție de lucru pentru heroku este aici http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (citate follow):
pachet instala
config.font_assets.origine = '*'
să config/aplicație.rb
. Dacă doriți un control mai granular, puteți adăuga origine diferite valori pentru mediu diferit, de exemplu, config/config/medii/de producție.rb
curl-am http://localhost:3000/assets/your-custom-font.ttf
În Cloudfront, selectați distribuție, sub "comportamentul" fila, selectați și editați intrare care controlează fonturi de livrare (pentru cel mai simplu Rails app aveți doar 1 intrare aici). Schimba Forward Headers de la "Nimic" pentru "Whilelist". Și se adaugă următoarele antete de a lista albă:
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age
Salvați-l și ca's a!
Precizare: am constatat că, uneori, Firefox ar't nu a reîmprospăta fonturi chiar dacă CORS de eroare a dispărut. În acest caz, ține răcoritoare pagina de câteva ori pentru a convinge Firefox ca esti foarte determinat.