font-face引用字体跨域导致font awesome图标无法正常显示

        前段时间上线一个项目，将css,js等静态资源做了cdn部署，结果发现我的font awesome图标通通不能正常显示。后来查了资料发现是由于font-face引用字体跨域导致的。 我的主域名www.domain.com ,   CDN资源域名 cdn.domain.com;

背景知识----http的访问控制（CORS）：

        当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

        比如，站点 http://domain-a.com 的某 HTML 页面通过 <img> 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

        出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。

        跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。

        跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。怎么声明，见解决方案。

      详细请看原文：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

本案分析

font-awesome.css 的代码如下：

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

可以看到，我们在此文件中对字体的引用就属于从脚本内发起的跨源HTTP请求，这是不被浏览器所允许的。

解决方案：

      跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。那本例来说，我们的资源服务器是 cdn.domain.com, 我们就要在这个服务器上声明我的资源允许被哪些源站访问。下面以Aapache为列，看看如何声明：

在apache 的.hatccess中做如下设置

<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"  #表示允许所有的源来访问资源，也可已指定为具体的域名,如 www.domain.com

Header set Access-Control-Allow-Methods "*"  #允许请求的方法 GET POST等

由于本案中使用的是阿里云的cdn服务器，无法按上述方法配置，好在阿里也给出了配置方法，见：

https://help.aliyun.com/knowledge_detail/40183.html