百度CDN跨域引用Bootstrap Glyphicons字体异常

qinjiannet@sina.com (在线疯狂) — Mon, 03 Nov 2014 16:03:00 +0800

使用百度前端公共库CDN服务（https://libs.baidu.com）的站长需要引起注意：

如果站点引用了百度CDN提供的Bootstrap Glyphicons字体，在使用较新版本的浏览器（包括Chrome 38+，Firefox 33+，以及IE 11等）访问这些包含Glyphicons字体的页面时，会无法正确显示Bootstrap Glyphicons字体。

使用BootCDN服务（https://www.bootcdn.cn/）替换百度公共库CDN服务，可以解决上述问题。

通过Chrome浏览器开发者工具的Network选项卡查看资源请求，可见glyphicons字体文件的请求响应出现异常。

测试页面的代码如下：

<html>
  <head>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <style>
      p {
        margin: 15px;
        font-size: 20px;
        font-weight:bold;
      }
    </style>
  </head>
  <body>
    <p>&lt;script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;</p>
    <p>&lt;script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"&gt;&lt;/script&gt;</p>
    <p>&lt;link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /&gt;</p>
    <i class="glyphicon glyphicon-plus-sign"></i>
  </body>
</html>

异常提示信息为：

Font from origin 'https://libs.baidu.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 'null' is therefore not allowed access.

来源于'https://libs.baidu.com'的字体文件加载请求已经被“跨域资源共享策略”阻塞。在请求的资源头部没有找到“访问-控制-允许-来源”。来源'null'（引用该字体文件的请求来源）因此被禁止访问。所以下列Bootstrap Glyphicons字体文件的访问请求被阻塞：

libs.baidu.com/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.woff
libs.baidu.com/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.ttf

故障原因可能与百度CDN的跨域资源共享（Cross-Origin Resource Sharing policy）策略配置不正确有关。

跨域资源共享协议（Cross-Origin Resource Sharing policy）是页面层次的控制模式。每一个页面需要返回一个名为‘Access-Control-Allow-Origin’的HTTP头来允许外域的站点访问。你可以仅仅暴露有限的资源和有限的外域站点访问。在COR模式中，访问控制的职责可以放到页面开发者的手中，而不是服务器管理员。当然页面开发者需要写专门的处理代码来允许被外域访问。

关于Corss-Origin Resource Sharing协议的更多信息，可以参阅博文：Cross-Origin Resource Sharing协议介绍

使用加速乐和360CDN提升OpenShift WordPress加载速度

qinjiannet@sina.com (在线疯狂) — Sun, 26 Oct 2014 16:28:00 +0800

由于搭建在OpenShift（Redhat Cloud红帽云）平台的Wordpress博客程序使用了amazonaws（亚马逊AWS云服务，服务器位于美国），因此用户从国内直接访问的速度比较缓慢。

使用网站CDN加速服务可以在一定程度上提升OpenShift Wordpress页面的加载速度。

需要注意的是，由于OpenShift实例的服务器IP地址会不定期更换，使用CDN服务时需要定期关注源站的IP是否发生变更，一旦发生变更就需要及时修改源站IP。

目前国内几个口碑比较好的网站CDN加速服务提供商包括：

加速乐（http://www.jiasule.com）
百度云加速（http://yunjiasu.baidu.com/）
360网站卫士（http://wangzhan.360.cn/）
安全宝（http://www.anquanbao.com）

这些网站CDN加速服务的使用方法大同小异，下面以加速乐为例简单介绍网站CDN加速服务的设置过程。

使用加速乐提升OpenShift Wordpress博客加载速度

首先访问http://www.jiasule.com/manage/，在加速乐域名列表中添加网站域名

接入方式包含NS方式和别名方式两种，如果使用NS方式需要同时使用加速乐的DNS服务。

已经使用第三方DNS服务的用户可以选择别名方式。

待加速乐自动检测完域名的DNS设置并生成域名的CNAME别名后，将原DNS服务的CNAME记录修改为加速乐的CNAME别名，点击DNS切换即可完成整个设置过程。

使用360网站卫士Google字体库提升Google字体加载速度

由于Wordpress博客引擎普遍采用了Google字体库，链接为：http://fonts.googleapis.com/cssfamily=Open+Sans:300,400,600&subset=latin,latin-ext，而目前在国内直接访问该链接的响应速度非常缓慢，因此会在很大程度上拖慢Wordpress的页面加载速度。

对此，只需在Wordpress主题模板的相应位置变更下列代码：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>

将googleapis替换为国内CDN即可

虽然没有经过严谨的测试，但是从直观使用感受来看，在替换完毕之后，OpenShift Wordpress的页面加载速度可以得到明显的提升。

书影 - Entries for the tag cdn

百度CDN跨域引用Bootstrap Glyphicons字体异常

使用加速乐和360CDN提升OpenShift WordPress加载速度

使用加速乐提升OpenShift Wordpress博客加载速度

使用360网站卫士Google字体库提升Google字体加载速度