1. 程式人生 > >解決Firefox下iconfont不顯示的問題

解決Firefox下iconfont不顯示的問題

腳本 增加 頭部 服務器 styles www val 放大 可能

http://www.cnblogs.com/freshman0216/p/3825166.html

何為跨域訪問,為什麽會有跨域限制?一切還得從瀏覽器的同源策略說起。

同源策略:是瀏覽器最核心也是最基本的安全功能,如果缺少了同源策略,則瀏覽器的正常功能可能會受到影響,可以說Web是構建在同源策略基礎之上的,瀏覽器只是針對同源策略的一種實現。

瀏覽器的同源策略:限制了來自不同源的“document”或腳本,對當前“document”讀取或設置某些屬性。同源策略的存在,限制了“源”自A的腳本只能操作“同源”頁面的DOM,“跨源”操作來源於B的頁面將會被拒絕。

何為同源呢?“img.company.com”和"agent.company.com"算不算是同源呢?相當長的時間我都認為這兩個域都是"company.com"的子域,算是同源的,這想法實際上是錯的。

同源:同主機(域名、子域或者IP地址相同)、同端口號、同協議。

URL 是否同源 原因
http://agent.soufun.com/dir1/a.aspx
http://agent.soufun.com/dir2/a.aspx
https://agent.soufun.com/secure.htm 協議不同
http://agent.soufun.com:81/dir2/a.aspx 端口不同
http://img.soufun.com/dir/a.jpg 子域不同

圖標字體:現在主流瀏覽器(包括IE6)都支持CSS3的自定義字體(@font-face),因此可以嘗試使用font來替換圖片展示網站的各種icon。這樣好處因為是矢量,放大不失真,體積小,缺點也很明顯,就是同一時刻字體只能是單色。

功能實現後,在IE上展示好好的(左下圖),但到了火狐上圖標字體卻不顯示了(右下圖)。通過火狐Firebug的控制臺發現如下報錯“已 阻止交叉源請求:同源策略不允許讀取 http://img.company.com/secondhouse/image/magentnew/styles/fonts20140704/icomoon.woff?ivldoa 上的遠程資源。可以將資源移動到相同的域名上或者啟用 CORS 來解決這個問題。

技術分享 技術分享

技術分享

為什麽IE和火狐下顯示不一樣呢?查資料得知“Firefox和IE9不支持對icon font字體的跨域訪問”,需要在圖標字體文件所在服務器配置Header參數“Access-Control-Allow-Origin”允許當前域名才可以。而且,經過驗證,必須將參數“Access-Control-Allow-Origin”配置為“*”才可以,配置為“*.當前域名”並不可以,不知道啥原因。

技術分享

具體這個配置是怎麽加上來的,因為是運維同事幫忙配置的,方法不得而知,可以參考《解決firefox和IE9對icon font字體的跨域訪問問題》,核心是增加“Access-Control-Allow-Origin:*”的響應輸出。在找運維同事幫忙添加配置前,為了確定方案可行性,利用Fiddler攔截http響應,添加了頭部,具體可以參考《fiddler設置HTTP返回頭的兩種方式》,再次感受了Fiddler的強大的功能。

解決Firefox下iconfont不顯示的問題