一、問題

在本地引入了Font Awesome 字體圖標，網(wǎng)頁未部署到服務(wù)上（在本地直接訪問，部署到nginx服務(wù)器，火狐瀏覽器能顯示）

目錄結(jié)構(gòu)：

引入方式：

使用方式：

訪問地址：

在Chrome瀏覽器中能正常訪問: 在火狐瀏覽器中訪問出現(xiàn)無法識別字符 可以看出在火狐瀏覽器下無法正常顯示字體圖標

二、分析

由于一直用火狐瀏覽器的firebug插件，在訪問的時候只能看到一行錯誤信息: NetworkError: A network error occurred

當時并未在意這個錯誤，只是認為可能是其他代碼導(dǎo)致的，無法顯示可能瀏覽器的兼容性問題，苦苦尋找火狐瀏覽器下的兼容方式，無果！最后把所有無關(guān)的代碼全部刪掉，只保留字體圖標樣式的引用以及相關(guān)使用，還是報這個錯誤，開始重視這個問題，但是無法顯示出詳細的錯誤信息，不知道發(fā)送的是什么網(wǎng)絡(luò)請求，并且在“網(wǎng)絡(luò)”標簽中也未發(fā)現(xiàn)有什么請求，最后無奈打開火狐自帶的開發(fā)者工具，打開以后，突然看到了完整的錯誤信息，甚是驚喜萬分！

錯誤信息很明顯的指出了URI是不合法的，不允許跨站訪問，這就涉及到了瀏覽器的同源策略的一個問題。

同源策略限制了一個源（origin）中加載文本或腳本來自其他源（origin）中資源的交互方式,在同源的定義，如果兩個頁面擁有相同的協(xié)議（protocol），端口(port)和主機(domain)，那么這兩個頁面就屬于同一個源。

這個協(xié)議看著貌似簡單，在http協(xié)議請求中是比較明確的，各個瀏覽器 實現(xiàn)的標準相同，舉例如下：

例如我們訪問的網(wǎng)址是http://domain.com/index.html

http請求同源示例: 針對http請求，以上對同源的策略判斷還是挺明白的。但是在本機訪問HTML就不同了，例如

剛才我訪問的本地的html頁面

file:///E:/workstation/ProTeam-web/vendor/font-awesome/pages/index.html

這個訪問地址的協(xié)議為file協(xié)議，這個協(xié)議在Firefox中爆出來過安全漏洞，導(dǎo)致在把網(wǎng)頁另存為的時候，可以訪問到我們本地文件，產(chǎn)生安全隱患，此bug于2004年暴出，鏈接為

https://bugzilla.mozilla.org/show_bug.cgi?id=230606

http://bobao.360.cn/news/detail/3390.html

繼續(xù)看剛才我訪問的這個頁面,這個頁面引用了font-awesome.css,而在font-swesome.css文件中需要引用相關(guān)的字體文件，通過以上錯誤信息可以看出，引用的路徑為:

file:///E:/workstation/ProTeam-web/vendor/font-awesome/vendor/font-awesome/fonts/fontawesome-webfont.woff

實際上在在font-awesome.mini.css文件中是這么寫的：

對比一下這兩個路徑: 由于上述所說的安全漏洞，火狐瀏覽器會把index.html頁面中的file:///E:/workstation/ProTeam-web/vendor/font-awesome/pages/ 這部分當做源，而在字體圖標文件的源是file:///E:/workstation/ProTeam-web/vendor/font-awesome/vendor/，這樣兩個鏈接就被火狐瀏覽器認為不是同源的，導(dǎo)致訪問的時候無法訪問，結(jié)果就是字體圖標無法顯示。

那如果換個方式引用呢？

我把index.html的位置換了一下，目錄結(jié)構(gòu)如下： 這樣再訪問index.html文件，在火狐瀏覽器下就能正確的顯示出字體圖標了。這時候兩者的訪問路徑是: 火狐瀏覽器同樣的會以index.html頁面前面的內(nèi)容當做源，然后通過此頁面引用字體文件的時候，前面一致，故被火狐瀏覽器認為是同源。

三、一個不太好的解決辦法

上述問題也就只有在本地開發(fā)的時候才會出現(xiàn)，部署到服務(wù)器上以后，如果在同一個站點下就不會出現(xiàn)上述問題。這個限制是瀏覽器的限制，火狐為這個限制增加了開關(guān)，在本機的開發(fā)的時候可以暫時把這個開關(guān)關(guān)閉

在火狐瀏覽器中輸入：about:config

搜索：security.fileuri.strict_origin_policy

然后雙擊把這個值更改為false即可。 或者采用更換文件夾的方式（章節(jié)二最后所述），把不同源設(shè)置為同源。但是這樣會限制了我們組織代碼路徑方式。

四、總結(jié)

總的來說這個問題是由于同源策略所導(dǎo)致，并不能說是火狐瀏覽器的bug，只是火狐為了安全起見，認為這個是不安全的，故做了限制。相關(guān)文章可以自行搜索。實際上在其他瀏覽器上也會有相應(yīng)的安全問題，例如chrome瀏覽器，但是chrome的開發(fā)團隊不認為這是一個bug，所以并沒有對此做相應(yīng)的限制。