在 Chrome 中未显示 Font Awesome 图标，这是与 MaxCDN 相关的跨域资源共享策略问题

Posted 2023-03-03

【中文标题】在 Chrome 中未显示 Font Awesome 图标，这是与 MaxCDN 相关的跨域资源共享策略问题

【英文标题】：Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

【发布时间】：2014-11-25 07:54:21

【问题描述】：

刚刚在几个网站上注意到 Google Chrome 中显示的字体真棒图标。控制台显示以下错误：

来自“http://cdn.keywest.life”的字体已被阻止 通过跨域资源共享策略加载：否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。原点 'http://www.keywest.life' 因此不是 允许访问。

我在其他几个网站上发现了完全相同的问题。这可以通过将自己的 CDN 引用替换为以下内容来轻松解决：

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

-但是，这不是解决方案，只是一种解决方法。我很想知道原因和正确的解决方案。

（原因是：该网站正在使用它自己的 CDN，由 MaxCDN 提供，并且引用了令人敬畏的字体，如果您从 Bootstrapcdn 资源加载相同的资源，Chrome 不会加载这些字体 - 提到上面-它有效）

这里是一个问题示例（在菜单和页脚中的社交图标中：http://www.keywestnight.com/fantasy-fest）

感谢您的帮助/解释！

【问题讨论】：

Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy的可能重复

【参考方案1】：

解决这个问题的方法是为 fontawesome 使用另一个 cdn。

https://www.cdnpkg.com/font-awesome/5.11.0

【参考方案2】：

在没有全面解释和解决问题的情况下，许多人一直面临着访问超棒字体资源的问题。

什么是 CORS：

跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头让用户代理获得访问来自与当前使用的站点不同的源（域）上的服务器的选定资源的权限。当用户代理从与当前文档来源不同的域、协议或端口请求资源时，它会发出跨域 HTTP 请求。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

问题：

问题源于字体很棒的字体是如何加载的。

@font-face
    font-family:'FontAwesome';
    src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
    src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal

字体通过样式表 (CSS) 加载。我们这里的情况是：

解决方案：

虽然已经在您的文件存储上创建了 CORS 规则，例如S3，并且已向相关域授予对资源的访问权限，当 CDN 尝试加载 CSS 中指定的字体时，加载这些字体时指定的源/域是 CDN 的源/域，但没有向 CDN 授予 CORS 访问权限域。

为 CDN 域创建 CORS 规则。

【讨论】：

即使为我们的数字海洋 CDN 添加了 CORS 规则，允许来源 * 也不能解决我们的问题。字体 url 的加载有效，但由于 Font Awesome 尝试使用 CDN 作为域而不是应用程序域名来加载 webfonts，因此导致 404 被击中。这是由于主css文件中的相对路径和..从主域/路径/到/字体加载的字体。

【参考方案3】：

我使用的 CDN 不允许我修改其响应，因此我修改了 font-awesome.min.css，将相对路径替换为绝对路径，并且它起作用了。

【参考方案4】：

没有一个对我有用的答案，我必须在 maxcnd 后台创建一个边缘规则（更改您区域上的配置文件）

更多信息在这里

https://www.maxcdn.com/one/tutorial/edge-rules-recipes/ https://www.maxcdn.com/one/tutorial/create-a-rule/

【讨论】：

你能告诉你完成这项工作的步骤吗？我遇到了同样的问题，但我使用的是带有 W3 Total 缓存插件的 AWS Cloudfront cdn。

【参考方案5】：

这是允许从所有域访问网络字体的工作方法：

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

【讨论】：

这是（此时）完美的 .htaccess 示例表单 MaxCDN：support.maxcdn.com/htaccess-example-collection

将其添加到 .htaccess - 文件中。

只需在文件匹配模式中添加 woff2 ，这样它就会变成 跨度>

@gatzkerob 将这些行添加到 .htaccess 文件的底部。该文件位于您网站的根目录中（通常是 public_html）。人们的知识水平不同。我敢肯定，Yatko 并不是故意把你排除在外，只是隐含的假设人们会认识到这是怎么回事。并不总是正确的。

你可能还想添加 woff2，因为如果你自己托管 Font Awesome 的东西，它会需要它。

【参考方案6】：

问题不在于 CSS 文件，而与提供字体文件的方式有关。 font-awesome.min.css 文件的行如下：

@font-facefont-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0')
format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') 
format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') 
format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal

这会导致浏览器从与 CSS 文件相同的服务器请求适当的字体文件（eot、woff、ttf 或 svg）。这是合乎逻辑且正确的。

但是，当浏览器从 cdn.keywest.life 请求该字体文件时，它会读取 Access-Control-Allow-Origin 标头的标头，但没有找到，因此会给出错误消息。 （这对我来说似乎是一个浏览器错误，因为它来自与 CSS 文件相同的服务器）。

相反，当您使用maxcdn.bootstrapcdn.com 时，响应包含Access-Control-Allow-Origin:* 标头，并且浏览器接受此字体文件。如果您的 cdn 服务器包含此标头，那么它也可以工作。

如果您有 Apache 服务器，请查看此答案：Font-awesome not properly displaying on Firefox / how to vend via CDN?

【讨论】：

感谢@Brent Washburne，这帮助我找出了 MaxCDN 的方法！