本文主要給大家介紹了關(guān)于Nginx跨域使用字體文件的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
問題描述
今天在使用子域名訪問根域名的CSS時(shí)，發(fā)現(xiàn)字體無法顯示，在確保CSS和Font字體的路徑加載無問題后，基本確定是因?yàn)榭缬虻膯栴}。
通過Nginx模塊Http_Headers_Module來添加Access-Control-Allow-Origin允許的地址
console報(bào)錯(cuò)信息
|
1
|
ccess to Font at 'http://w001.static.akhack.com/css/KohinoorBangla-Regular.ttf' from origin 'http://carey.akhack.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://carey.akhack.com' is therefore not allowed access. |
解決方法
|
1
2
3
4
5
|
location ~* \.(eot|ttf|woff|svg|otf)$ { add_header Access-Control-Allow-Origin http://carey.akhack.com; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS;} |
注意
|
1
2
|
add_header Access-Control-Allow-Origin http://carey.akhack.com;//只允許單域名或者 ‘*' 。不推薦 ‘*' ，會(huì)導(dǎo)致安全問題 |
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)服務(wù)器之家的支持。
原文鏈接：https://carey.akhack.com/2017/06/08/Nginx跨域使用字體文件的配置方法/
