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

使用百度前端公共库CDN服务(http://libs.baidu.com)的站长需要引起注意:

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

使用360提供的前端公共库CDN服务(http://libs.useso.com/)替换百度公共库CDN服务,可以解决上述问题。

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

百度CDN-Glyphicons字体引用异常

上述测试页面的代码如下:

<html>
  <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://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="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;</p>
    <p>&lt;script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"&gt;&lt;/script&gt;</p>
    <p>&lt;link href="http://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 'http://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. 

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

  1. libs.baidu.com/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.woff
  2. 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协议介绍 

本文链接:http://bookshadow.com/weblog/2014/11/03/baidu-cdn-bootstrap-glyphicons-font-cross-orgin-resource-block/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码