来自源的字体已被跨源资源共享策略阻止加载

将此规则添加到您的 .htaccess

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

更好的是，正如@david thomas 所建议的，您可以使用特定的域值，例如

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

---

自 2014 年 9 月/10 月以来的 Chrome 使字体接受与 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 中对此进行了讨论

鉴于对于字体，浏览器可能会执行 preflight check，那么您的 S3 策略 needs the cors request header as well。您可以在 Safari（目前不执行 CORS 检查字体）和 Firefox（执行）中检查您的页面，以仔细检查这是所描述的问题。

有关 Amazon S3 CORS 的详细信息，请参阅 Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading 上的堆栈溢出答案。

一般注意，因为这曾经仅适用于 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：

选择您的存储桶单击右上角的属性 Permisions => Edit Cors Configuration => Save Save

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 -> Distribution -> Behaviors for this origin 中，使用 Forward Headers: Whitelist 选项并将“Origin”标头列入白名单。

在 CloudFront 传播新规则时等待约 20 分钟

现在，您的 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/

它的简短版本是：

编辑 S3 CORS 配置（我的代码示例没有正确显示） 注意：这已经在原始问题中完成 注意：提供的代码不是很安全，链接页面中的更多信息。转到分发的“行为”选项卡，然后单击以编辑将“转发标头”从“无（改进缓存）”更改为“白名单”。将“Origin”添加到“Whitelist Headers”列表中保存更改

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

---

对于那些使用带有 web.config 文件的 Microsoft 产品的用户：

将其与您的 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");

---

对于 AWS S3，将跨域资源共享 (CORS) 设置为以下对我有用：

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

---

有一篇很好的文章 here。

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

这将是查看 browser policy 之类的框架等的好时机。

---

聚会迟到了，但我刚刚遇到了这个问题，并在我的 AWS 存储桶配置（权限选项卡）中使用以下设置解决了这个问题。请求的格式不再是 XML，而是 JSON：

[
    {
        "AllowedHeaders": [
            "Content-*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://www.yourdomain.example",
            "https://yourdomain.example"
        ],
        "ExposeHeaders": []
    }
]

---

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

像这样

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

我们需要原产地响应

---

如果要允许特定域的文件夹中的所有字体，则可以使用以下命令：

  <location path="assets/font">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

其中 assets/font 是所有字体所在的位置， http://localhost:3000 是您要允许的位置。

---

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 。

捆绑安装

添加 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 相信您真的下定决心。

---