font-awesome 在 apache 伺服上無法使用

這一陣子做了一些資料調整,把原本的Dropbox的連結轉至自家的主機,
不過在使用font-awesome時發現到不能正常載入圖示,變成了框框…

用Chrome F12除錯,發現下列問題:

Access to Font at ‘https://AAA.XXX/font/fonts/fontawesome-webfont.woff2?v=4.7.0’ from origin ‘http://blog.BBB.XXX’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://blog.BBB.XXX” is therefore not allowed access.

問題字型路徑是正確的可以下載,CSS也是可以被閱讀的,所以路徑問題排除
看來是CORS跨來源 HTTP的問題,Server to Server 上無法引用或使用特別的檔案

Web Server是用blogger的,之前引用沒問題,所以來查一下rel目的的設定哪裡需要設定?

架設環境為 apache server 2.2 OR 2.4

再爬了一下文,發現apache上使用font-awesome會出問題的並不少,
看起來少了一個檔『.htaccess』,在目錄下建立這個檔後,把以下資訊加入即可

AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType application/x-font-woff woff

原先以為是https無法互連http的問題,或者是路徑上無法對應(相對路徑),
最後是因為apache少了對上列檔案格式的支援,所以在.htaccess上加入後改善

以上,請參考指教!

About Necos

Necos一開始只是好奇寫程式玩玩,現在喜歡敲敲打打3C產品,有空沒事就惡整一下,是人為或自損也好,反正能送修就送修,藉此週而復始的學習並升級,就這樣渡過了二十餘年…

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *