刚才碰到一个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.在st.domain.com的主机配置中加入
nginx
server { ... # Fix @font-face cross-domain restriction in Firefox location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ { add_header Access-Control-Allow-Origin "http://www.shouce.ren"; } ... }
apache
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://www.shouce.ren" </IfModule> </FilesMatch>
重启apache。
还可以添加mine
AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType application/x-font-woff woff