跨域资源共享策略阻止了源字体的加载

我在某些Chrome浏览器上收到以下错误，但不是全部。目前还不能完全确定问题是什么。

跨域资源共享策略已阻止加载来自来源“ https://ABCDEFG.cloudfront.net ”的字体：所请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问源“ https://sub.domain.com ”。

我在S3上具有以下CORS配置

<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所建议的，甚至更好，您可以使用特定的域值，例如

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

自2014年9月10日以来，Chrome对字体的字体进行了与Firefox https://code.google.com/p/chromium/issues/detail?id=286681相同的CORS检查。在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，所以搜索Firefox而不是Chrome可能有所帮助。

我只需添加<AllowedMethod>HEAD</AllowedMethod>到S3存储桶的CORS策略即可解决该问题。

例：

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

1. 选择你的水桶
2. 单击右上角的属性
3. 权限=>编辑Cors配置=>保存
4. 保存

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

2014年6月26日，AWS在CloudFront上发布了适当的Vary：Origin行为，现在您只需

为您的S3存储桶设置CORS配置：

<AllowedOrigin>*</AllowedOrigin>

在此源的CloudFront->分配->行为中，使用转发标头：白名单选项，并将“来源”标头列入白名单。

等待约20分钟，然后CloudFront传播新规则

现在，您的CloudFront分发应该为不同的客户端Origin头缓存不同的响应（带有正确的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

我遇到了同样的问题，此链接为我提供了解决方案：

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

它的简短版本是：

1. 编辑S3 CORS配置（我的代码示例未正确显示）
   注意：此问题已在原始问题中完成。
   注意：所提供的代码不是很安全，请在链接页面中获取更多信息。
2. 转到您分配的“行为”标签，然后单击以进行编辑
3. 将“转发标题”从“无（改善缓存）”更改为“白名单”。
4. 将“来源”添加到“白名单标题”列表中
5. 保存更改

您的Cloudfront发行版将更新，大约需要10分钟。在那之后，一切都会好起来的，您可以通过检查是否从浏览器中删除了与CORS相关的错误消息来进行验证。

对于将Microsoft产品与web.config文件一起使用的用户：

将此与您的web.config合并。

允许在任何域上替换value="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");

有一个很好的书面记录在这里。

在nginx / apache中配置它是一个错误。
如果使用托管公司，则无法配置边缘。
如果您使用的是Docker，则该应用程序应为自包含的。

请注意，有些示例使用，connectHandlers但这仅在文档上设置标题。使用rawConnectHandlers适用于所有投放的资产（字体/ css /等）。

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

这将是查看诸如框架等浏览器策略的好时机。

如果您使用node.js作为服务器，只需在您的服务器中添加原产地使用...

像这样

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

我们需要对起源的回应

heroku的工作解决方案在此处http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html （引号后面）：

如果您在Heroku中运行Rails应用并将Cloudfront用作CDN，则下面是您可以做的事情。它已经在Ruby 2.1 + Rails 4，Heroku Cedar堆栈上进行了测试。

将CORS HTTP标头（Access-Control- *）添加到字体资源

• 将gem添加font_assets到Gemfile中。
• bundle install
• 添加config.font_assets.origin = '*'到config/application.rb。如果您想要更精细的控制，则可以将不同的原始值添加到不同的环境，例如，config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• 将代码推送到Heroku。

配置Cloudfront以转发CORS HTTP标头

在Cloudfront中，选择您的发行版，在“行为”选项卡下，选择并编辑用于控制字体交付的条目（对于大多数简单的Rails应用，此处只有1个条目）。将转发标题从“无” 更改为“ Whilelist”。并将以下标头添加到白名单：

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

保存，就是这样！

警告：我发现，即使CORS错误消失了，有时Firefox也不会刷新字体。在这种情况下，请刷新页面几次，以使Firefox确信您确实有决心。