css載入字型的跨域問題

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

剛才碰到一個css載入字型跨域問題，記錄一下啊。

網站的動態請求與靜態檔案請求是不同的網域名稱的。網站的網域名稱為 www.domain.com，而靜態檔案的網域名稱為 st.domain.com。

問題：

頁面中載入css檔案：<link rel="stylesheet" href="http://st.domain.com/css/uniform.css" />

此css中調用了外部字型如下：

@font-face {  font-family: 'FontAwesome';  src: url('../font/fontawesome-webfont.eot');

}

瀏覽器報請求跨域的錯誤。

解決方案：

我們使用Access-Control-Allow-Origin：* 通過啟用cors 來解決跨域問題。

具體步驟如下：

1.開啟apache的mod_headers模組

LoadModule headers_module modules/mod_headers.so

2.在st.domain.com的主機配置中加入

Header set Access-Control-Allow-Origin http://www.domain.com (這句話也可以加入到url重寫檔案)

重啟apache。