跨源资源共享策略已阻止来自原始字体的加载
我在几个Chrome浏览器上收到以下错误，但不是全部。 目前还不确定问题是什么。
来自“ https://ABCDEFG.cloudfront.net ”的字体已被阻止加载“跨源资源共享”策略：在请求的资源上没有“Access-Control-Allow-Origin”标头。 原因' https://sub.domain.com '因此不允许访问。
我在S3上有以下的CORSconfiguration
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedHeader>*</AllowedHeader> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration> 请求
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
来自Cloudfront / S3的所有其他请求都能正常工作，包括JS文件。
将此规则添加到您的.htaccess
Header add Access-Control-Allow-Origin "*"
甚至更好，正如@david thomas所build议的，你可以使用特定的域值，例如
Header add Access-Control-Allow-Origin "your-domain.com"
Chrome自〜2014年9月/ 10月以来，使得字体受到与Firefox完成相同的CORS检查https://code.google.com/p/chromium/issues/detail?id=286681 。 有关https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw的讨论;
鉴于对于字体浏览器可能做一个预检检查 ，那么你的S3政策也需要Cors请求头 。 你可以检查你的网页说Safari浏览器（目前不做CORS检查字体）和Firefox（这样做）来仔细检查这是所描述的问题。
请参阅Amazon S3 CORS（跨源资源共享）上的堆栈溢出应答和 Amazon S3 CORS详细信息的Firefox跨域字体加载 。
注意一般，因为这只适用于Firefox，所以它可能有助于searchFirefox而不是Chrome。
Nginx的：
location ~* \.(eot|ttf|woff)$ { add_header Access-Control-Allow-Origin '*'; }
AWS S3：
- select你的桶
- 点击右上方的属性
- Permisions =>编辑Corsconfiguration=>保存
- 保存
http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/
我只需在S3 Bucket的CORS策略中添加<AllowedMethod>HEAD</AllowedMethod>即可解决问题。
例：
<?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>
2014年6月26日，AWS在CloudFront上发布了适当的Vary：Origin行为，所以现在你只需要
为您的S3存储桶设置一个CORSconfiguration：
<AllowedOrigin>*</AllowedOrigin>
在CloudFront – > Distribution – > Behaviors中，使用“Forward Headers：Whitelist”选项，并将“Origin”标题列入白名单。
CloudFront传播新规则时等待〜20分钟
现在，您的CloudFront分配应该为不同的客户端Origin标头caching不同的响应（具有适当的CORS标头）。
唯一的工作对我来说（可能是因为我与www。用法不一致）：
将其粘贴到您的.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
我有同样的问题，这个链接为我提供了解决scheme：
http://www.holovaty.com/writing/cors-ie-cloudfront/
简短的版本是：
- 编辑S3 CORSconfiguration（我的代码示例没有正确显示）
注意：这已经在原始问题中完成了
注意：所提供的代码不是很安全，链接页面中有更多信息。 - 转到你的发行版的“行为”标签，点击编辑
- 将“正向标题”从“无（改进caching）”更改为“白名单”。
- 将“来源”添加到“白名单标题”列表中
- 保存更改
您的云端分布将会更新，大约需要10分钟。 之后，一切都会好的，你可以通过检查CORS相关的错误信息从浏览器中去掉。
这里有一个很好的写法。
在nginx / apache中configuration这是一个错误。
如果您使用托pipe公司，则无法configuration边缘。
如果您使用的是Docker，则该应用程序应该是自包含的。
请注意，一些示例使用connectHandlers但只能在文档上设置标题。 使用rawConnectHandlers适用于所有提供的资产（fonts / 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(); });
这将是一个很好的时间来看看像框架等浏览器的政策 。
对于使用带有web.config文件的Microsoft产品的用户：
把它和你的web.config合并。
允许在任何域上使用
value="*"replacevalue="domain"value="*"
<?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>
如果您没有编辑web.config的权限，请在您的服务器端代码中添加此行。
Response.AppendHeader("Access-Control-Allow-Origin", "domain");
