解决Font Awesome图标跨域引用字体导致图标不能显示的方法
2021-12-17
网页使用 Font Awesome 字体图标时图标不能正常显示，浏览器控制台出现“@font-face 跨源请求失败。资源访问受限”的错误提示，出现该错误的原因是浏览器的同源策略机制导致。
解决方法是使用跨域资源共享（CORS）机制，跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。
例如 apache 服务器可以通过 .htaccess 文件添加：
<FilesMatch ".(eot|ttf|svg|woff)"> Header set Access-Control-Allow-Origin "*" #表示允许所有的源来访问资源，也可已指定域名，如 www.neirong.org Header set Access-Control-Allow-Methods "*" #允许请求的方法 GET POST等
PS：非 apache 服务器百度搜索对应的方法。
扩展理解：
同源策略是浏览器基于安全原因，阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性，通俗地理解就是阻止资源的跨域请求。
比如 https://www.tddx.net/ 网站使用 @font-face 引用 http://www.bb.com 网站服务器上的字体文件，就会激活浏览器的同源策略机制。
如出现跨域请求的代码：
@font-face{
font-family:'Poppins';
src:url('http://www.bb.com/fonts/Poppins-Light.eot'); /* IE9 Compat Modes */
src:url('http://www.bb.com/fonts/Poppins-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://www.bb.com/fonts/Poppins-Light.woff') format('woff'), /* Modern Browsers */
url('http://www.bb.com/fonts/Poppins-Light.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.bb.com/fonts/Poppins-Light.svg#Poppins') format('svg'); /* Legacy iOS */
font-style:normal;
font-weight:300;
}
解决资源跨域请求限制的方法是 CORS 机制，英文全称 Cross-origin resource sharing，中文意思跨域资源共享机制。
CORS允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行，浏览器支持在 API 容器中（如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。
要注意的是：CORS 需要浏览器和服务器同时支持，当前除了 IE10 以下浏览器以外的主流浏览器都支持该功能。