解決Firefox下iconfont不顯示的問題

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的強大的功能。