css加载字体跨域问题
刚才碰到一个css加载字体跨域问题,记录一下。
站点的动态请求与静态文件请求是不同的域名的。站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com。
问题:
页面中加载css文件:<link rel="stylesheet" href="http://st.domain.com/css/uniform.css" />
此css中调用了外部字体如下:
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
}
浏览器报请求跨域的错误。
解决方案:
我们使用Access-Control-Allow-Origin:* 通过启用cors 来解决跨域问题。
具体步骤如下:
1.开启apache的mod_headers模块
LoadModule headers_module modules/mod_headers.so
2.设置Access-Control-Allow-Origin
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
done!
css加载字体跨域问题的更多相关文章
- 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- netstrem获取302后的地址,可用来截图,加载实际跨域文件
直接放代码,老外博客看来的,老外还是牛逼,这都用出来了:http://jessewarden.com/2009/03/handling-crossdomainxml-and-302-redirects ...
- CSS远程加载字体
CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...
- 加上cdn后字体跨域
@font-face是CSS3中的一个特性,可以把自己定义的Web字体嵌入到网页中,随着@font-face,越来越多的网页采用字体图标作为网页中的小图形. 比如Bootstrap就采用了Glyphi ...
- css加载会造成阻塞吗?
终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染 ...
- css加载会造成阻塞吗
本文由云+社区发表 作者:嘿嘿嘿 可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为 ...
- webpack4加载字体
webpack加载字体,刚开始下载完字体后就用css去引用它,结果死活没显示我要的字体,后来https://www.aliyun.com/jiaocheng/654750.html这篇文章说要把下载的 ...
- 关于IIS下字体跨域问题
将网站的CSS与项目分离后报了一个错,是因为字体跨域的原因,查了一下资料. 解决方案如下: 1:打开访问的资源iis,在HTTP 响应表头中添加代码名称:Access-Control-Allow-Or ...
随机推荐
- <kafka><应用场景><Kafka VS Flume>
前言 最近在搭一个离线Hadoop + 实时SparkStreaming的日志处理系统,然后发现基本上网上的这种系统都集成了kafka. 自己对kafka有一点点的认识,之前看过官网文档,用过一次,就 ...
- nginx——ngx_http_gzip_module
文件压缩 Syntax: gzip on | off; Default: gzip off; Context: http, server, location, if in location Synta ...
- Vue数组操作不刷新视图问题的解决
最近使用Vue2.0开发项目,有一个列表使用v-for绑定到数组,按照Vue的推荐方案,使用push.splice.this.$set三个变异方法操作数组.发现在添加页面,三个方法都能及时刷新视图:但 ...
- Java学习笔记9(面象对象9:多态)
多态概述 多态是继封装.继承后,面对对象的第三大特性. 现实事物经常会出现多态,如学生,学生是人的一种,则一个具体的同学张三既是学生也是人,即出现两种形态. Java作为面向对象的语言,同样可以描述一 ...
- 若sql语句中order by指定了多个字段,怎么排序?
举个例子吧: order by id desc,time desc 先是按 id 降序排列 (优先)如果 id 字段 有些是一样的话 再按time 降序排列 (前提是满足id降序排列)
- SpringBoot(二)thymeleaf模板的引入
接着上一次的配置 1.在pom文件中添加thymeleaf模板的引入, <dependency> <groupId>org.springframework.boot</g ...
- 移动端与PC端的触屏事件
由于移动端是触摸事件,所以要用到H5的属性touchstart/touchmove/touched,但是PC端只支持鼠标事件,所以此时可以这样转换 var touchEvents = { touchs ...
- AOP记录方法的执行时间
作用AOP监控方法的运行时间如下: @Component @Aspect public class LogAop { private Logger log = LoggerFactory.getLog ...
- 【一题多解】Python 字符串逆序
https://blog.csdn.net/seetheworld518/article/details/46756639 https://blog.csdn.net/together_cz/arti ...
- Django之模型层-单表操作
单表操作 添加记录 方式1 # 先实例化models中的对象,按照定义的语句规则传入参数,然后使用对象调用save()保存到数据库 book_obj = Book(id=1,title='python ...