Nginx實現(xiàn)跨域使用字體文件的配置詳解
更新時間：2017年06月26日 09:12:14 作者：Carey
這篇文章主要給大家介紹了關(guān)于Nginx實現(xiàn)跨域使用字體文件的配置方法，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
本文主要給大家介紹了關(guān)于Nginx跨域使用字體文件的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
問題描述
今天在使用子域名訪問根域名的CSS時，發(fā)現(xiàn)字體無法顯示，在確保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; //只允許單域名或者 ‘*' 。不推薦 ‘*' ，會導(dǎo)致安全問題
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
nginx提示：500 Internal Server Error錯誤解決辦法
這篇文章主要介紹了 nginx提示：500 Internal Server Error錯誤解決辦法的相關(guān)資料,這里提供了解決該問題的詳細(xì)步驟，希望能幫助到大家，需要的朋友可以參考下2017-08-08
詳解nginx.conf 中 root 目錄設(shè)置問題
這篇文章主要介紹了詳解nginx.conf 中 root 目錄設(shè)置問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
我們在使用的時候會遇到很多的惡意IP攻擊,這個時候就要用到Nginx 禁止IP訪問了,下面這篇文章主要給大家介紹了關(guān)于Nginx如何限制IP訪問只允許特定域名訪問的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了CentOS利用Nginx搭建下載功能服務(wù)器,需要的朋友可以參考下2017-06-06
nginx快速部署一個網(wǎng)站服務(wù)(多域名+多端口)
本文主要介紹了nginx快速部署一個網(wǎng)站服務(wù)，并實現(xiàn)多域名和多端口，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
反向代理：反向代理也叫reverse proxy,指的是代理外網(wǎng)用戶的請求到內(nèi)部的指定web服務(wù)器,并將數(shù)據(jù)返回給用戶的一種方式,這是用的比較多的一種方式,下面這篇文章主要給大家介紹了關(guān)于Nginx反向代理的相關(guān)資料,需要的朋友可以參考下2021-08-08
文章詳細(xì)介紹了如何在同一端口下部署PC端和App端項目,包括Nginx配置、前端打包配置、manifest.json配置以及針對Vue3+vite項目的特殊配置,通過示例項目A和項目B,展示了如何修改Vite配置文件、調(diào)整路由配置,并通過Nginx進(jìn)行關(guān)鍵配置2026-01-01
在使用?Nginx?作為?Web?服務(wù)器時,有時會遇到客戶端嘗試上傳大文件時返回???413?Request?Entity?Too?Large???的錯誤,本文將介紹如何通過配置?Nginx?來解決這個問題,有需要的可以參考下2025-05-05
這篇文章主要介紹了Nginx部署JavaWeb項目全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
本文詳細(xì)介紹了如何配置Nginx作為下載服務(wù)器,包括基本配置指令、location塊配置、Content-Disposition頭部信息、sendfile指令、文件系統(tǒng)權(quán)限設(shè)置以及訪問控制,通過實驗,驗證了Nginx在文件下載場景中的高效和安全性2025-12-12