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!

出处:www.l1mn.com

原文标题:css加载字体跨域问题

原文地址:https://www.l1mn.com/p/qjnil.html

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

标签:跨域
评论

皖ICP备2023023451号

Copyright © L1MN.COM 联系方式:l1mnfw@163.com