apache字体文件跨域_如何解决使用LayerLocalCDN后字体文件出现的跨域问题

导语：字体跨域的问题是所有的使用了CDN加载字体文件的网站都有可能遇到的问题，不单单只有LayerLocalCDN。或者是所以将静态字体放到其他服务器上加载的网站都会遇到。

问题描述

在谷歌浏览器里面，右键——审查元素——console，我们可以看到以下的提示。

Font from origin ‘http://cdn.wordpressleaf.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 ‘https://www.wordpressleaf.com’ is therefore not allowed access.

WordPressLeaf.com

在网页上的表现就是字体图标加载不出来，显示为空白。

解决方法

以apache为例

1.开启apache的mod_headers模块

LoadModule headers_module modules/mod_headers.so

2.在缓存服务器的主机配置中加入下面的代码。注意，不是源站，是缓存站。

Header set Access-Control-Allow-Origin "https://www.wordpressleaf.com"

以Nginx为例

通过缓存服务器Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址。

在缓存服务器Nginx的conf目录下修改nginx.conf，添加以下代码：

location ~* \.(eot|ttf|woff|svg|otf)$ {

add_header Access-Control-Allow-Origin https://www.wordpressleaf.com;

}