font-face引用字体跨域导致font awesome图标无法正常显示
2018-03-08 16:29
1271 查看
前段时间上线一个项目,将css,js等静态资源做了cdn部署,结果发现我的font awesome图标通通不能正常显示。后来查了资料发现是由于font-face引用字体跨域导致的。 我的主域名www.domain.com , CDN资源域名 cdn.domain.com;
比如,站点 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-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请求,这是不被浏览器所允许的。
<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
背景知识----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
相关文章推荐
- 非网络引用element-ui css导致图标无法正常显示的解决办法
- SpringMVC导致Bootstrap中的Glyphicons 字体图标无法正常显示
- 非网络引用element-ui css导致图标无法正常显示的解决办法
- 开启cdn后无法显示字体图标——CDN服务器跨域问题
- Bootstrap字体图标无法正常显示的解决方法
- ie上 CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。(包括图标无法显示)
- webpack配置导致字体图标无法显示的解决方法
- bootstrap本地的字体图标在firefox上无法正常显示
- 网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
- font-face 移动端字体图标不显示的Bug
- webpack配置导致字体图标无法显示
- font awesome 字体冲突 图标无法显示
- ASp.net中引用图片,图片无法正常显示的一个原因
- TortoiseSVN和TortoiseCVS共存时图标无法正常显示
- 集成到web项目之后,导出PDF时,中文无法正常显示或找不到中文字体
- css 使用@font-face 嵌入自定义字体或字体图标方法笔记
- font-face字体图标制作和使用
- font-face 在 Firefox无法正常工作问题
- 文档库创建的子文件夹的URL显示为 http://[机器名]/.... 导致无法正常访问的问题解决办法
- CSS3 @font-face 显示特殊字体