使用百度静态资源库bootstrap字体出现问题

叁歲伎倆 2022-07-25 18:59 124阅读 0赞

Font from origin 'http://apps.bdimg.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://localhost:8000' is therefore not allowed access.

\----------------------------------------------以下内容转载————————————————

使用百度前端公共库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字体引用异常][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><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script></p>
        <p><script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></p>
        <p><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /></p>
        <i class="glyphicon glyphicon-plus-sign"></i>
      </body>
    </html>
    
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20

异常提示信息为：

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. 
    
     
      
       1

来源于'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协议介绍][Cross-Origin Resource Sharing]

[CDN-Glyphicons]: http://7b1hdq.com1.z0.glb.clouddn.com/blog/pic/130/baidu-cdn-glyphicons-block.jpg
[Cross-Origin Resource Sharing]: http://www.cnblogs.com/shanyou/archive/2012/09/16/2687907.html