今天在维护公司网站的时候发现一个跨域字体加载问题，通过网上找的资料得到了解决。
网站可以通过www.domain.com和domain.com来访问，网站配置文件中指定域名是www.domain.com，所以所有资源的路径都是http://www.domain.com/abc/123.xx 这样的
问题：
页面中加载css中调用了外部字体如下：
|
1 2 3 4 |
@font-face { font-family: 'FontAwesome'; src: url('../font/fontawesome-webfont.eot'); } |
浏览器报请求跨域的错误:
Font from origin 'http://www.domain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://domain.com' is therefore not allowed access.
解决方案：
我们使用Access-Control-Allow-Origin：* 通过启用cors 来解决跨域问题。
具体步骤如下：
1.开启apache的mod_headers模块
|
1 |
LoadModule headers_module modules/mod_headers.so |
2.在www.domain.com的主机配置中“</VirtualHost>”标签前加入
|
1 |
Header set Access-Control-Allow-Origin http://domain.com |
重启apache。
若服务器为nginx，可以在nginx的conf文件中加入以下内容：
|
1 2 3 |
location / { add_header Access-Control-Allow-Origin *; } |
原文链接：css加载FontAwesome字体的跨域问题，转载请注明来源！