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

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

如何解决使用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 'http://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 "http://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 http://www.wordpressleaf.com;
}

编辑 杨

我们是一群WordPress的爱好者,爱它的简单快捷,爱它的变化多样。

或许您还喜欢下面的文章

13 条评论

    • 编辑 杨
      2016-07-26 在 14:59
      回复

      欢迎,欢迎

    • 编辑 杨
      2016-07-26 在 14:49
      回复

      欢迎欢迎

    • 编辑 杨
      2016-07-26 在 14:49
      回复

      欢迎欢迎

      • 2016-07-28 在 16:00
        回复

        最近看你经常光顾小博、特来支持回应一下~··

  1. 2016-07-26 在 21:30
    回复

    技术笔记,得多来学学。。。。

    • 编辑 杨
      2016-07-26 在 22:33
      回复

      谢谢

  2. 2016-07-26 在 23:49
    回复

    过来看看,欢迎经常互访共同进步。

    • 编辑 杨
      2016-07-27 在 07:41
      回复

      欢迎,欢迎

    • 编辑 杨
      2016-07-28 在 10:03
      回复

      呵呵呵

留下一条回复

关闭