本文主要給大家介紹了關于Nginx跨域使用字體文件的相關內容,分享出來供大家參考學習,下面來一起看看詳細的介紹:
問題描述
今天在使用子域名訪問根域名的CSS時,發現字體無法顯示,在確保CSS和Font字體的路徑加載無問題后,基本確定是因為跨域的問題。
通過Nginx模塊Http_Headers_Module
來添加Access-Control-Allow-Origin
允許的地址
console報錯信息
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.
解決方法
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;}
注意
add_header Access-Control-Allow-Origin http://carey.akhack.com;//只允許單域名或者 ‘*' 。不推薦 ‘*' ,會導致安全問題
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答