刚才碰到一个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加载字体跨域问题的更多相关文章

  1. 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  2. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  3. netstrem获取302后的地址,可用来截图,加载实际跨域文件

    直接放代码,老外博客看来的,老外还是牛逼,这都用出来了:http://jessewarden.com/2009/03/handling-crossdomainxml-and-302-redirects ...

  4. CSS远程加载字体

    CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...

  5. 加上cdn后字体跨域

    @font-face是CSS3中的一个特性,可以把自己定义的Web字体嵌入到网页中,随着@font-face,越来越多的网页采用字体图标作为网页中的小图形. 比如Bootstrap就采用了Glyphi ...

  6. css加载会造成阻塞吗?

    终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染 ...

  7. css加载会造成阻塞吗

    本文由云+社区发表 作者:嘿嘿嘿 可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为 ...

  8. webpack4加载字体

    webpack加载字体,刚开始下载完字体后就用css去引用它,结果死活没显示我要的字体,后来https://www.aliyun.com/jiaocheng/654750.html这篇文章说要把下载的 ...

  9. 关于IIS下字体跨域问题

    将网站的CSS与项目分离后报了一个错,是因为字体跨域的原因,查了一下资料. 解决方案如下: 1:打开访问的资源iis,在HTTP 响应表头中添加代码名称:Access-Control-Allow-Or ...

随机推荐

  1. adb devices连接不上设备

    1.端口被占用 解决办法:netstat -aon|findstr "5037",找到占用5037这个端口的进程,然后根据pid在任务管理器里面找到进程然后结束 2.插拔usb数据 ...

  2. VS Code 使用小技巧

    所有插件查找地址(https://marketplace.visualstudio.com/) 编码快捷方式(http://docs.emmet.io/cheat-sheet/) 安装插件出现  错误 ...

  3. Oracle表的查询(一)

    表查询关键字.字段.表名不加引号时不区分大小写引号定义的内容区分大小写运算中有null值时,结果为null*nvl(字段,赋值):如果字段值为null,则取后面一个值*like 关键字:%表示若干个字 ...

  4. tomcat多实例的端口设置

    需要改4个端口 8080  8009 8005 8443 8080改成8081 8005改成8105 8009改成8109 8443 改成8543

  5. Python学习笔记第五周

    目录 一.基础概念 1.模块定义 2.包的定义 3.导入包的本质 4.导入模块的本质 5.导入方法 6.import的本质 7.导入优化 8.模块分类 9.标准库介绍 1.time与datetime ...

  6. https://stackoverflow.com/questions/40949967/running-storm-from-intellij-nimbus-error

    https://stackoverflow.com/questions/40949967/running-storm-from-intellij-nimbus-error 0down votefavo ...

  7. Android SO动态调试之IDA

    1.上传并启动android_server(IDA的dbgsrv目录) 2.设置端口转发:adb forward tcp:23946 tcp:23946 3.调试模式启动应用:adb shell am ...

  8. ANDROID BINDER机制浅析

    Binder是Android上一种IPC机制,重要且较难理解.由于Linux上标准IPC在灵活和可靠性存在一定不足,Google基于OpenBinder的设计和构想实现了Binder. 本文只简单介绍 ...

  9. iOS常用的代码块整理

    strong @property (nonatomic,strong) <#Class#> *<#object#>; weak @property (nonatomic,wea ...

  10. 基于PaaS和SaaS研发平台体系

    基于PaaS和SaaS研发的商业云平台实战 背景介绍 SaaS.PaaS.IaaS等云服务模式已经被大家普遍认可,在研发过程中借力一些PaaS和SaaS平台,能够提升产品的研发速度和功能稳定程度.本文 ...