如何解决使用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.

如何解决使用LayerLocalCDN后字体文件出现的跨域问题
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;
}

目前在“如何解决使用LayerLocalCDN后字体文件出现的跨域问题”上有13条评论

小C博客进行回复 取消回复

邮箱地址不会被公开。 必填项已用*标注