快捷導(dǎo)航

Nginx實(shí)現(xiàn)跨域使用字體文件的配置詳解

更新時(shí)間：2017年06月26日 09:12:14 作者：Carey

這篇文章主要給大家介紹了關(guān)于Nginx實(shí)現(xiàn)跨域使用字體文件的配置方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。

本文主要給大家介紹了關(guān)于Nginx跨域使用字體文件的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)一起看看詳細(xì)的介紹：

問(wèn)題描述

今天在使用子域名訪問(wèn)根域名的CSS時(shí)，發(fā)現(xiàn)字體無(wú)法顯示，在確保CSS和Font字體的路徑加載無(wú)問(wèn)題后，基本確定是因?yàn)榭缬虻膯?wèn)題。

通過(guò)Nginx模塊Http_Headers_Module來(lái)添加Access-Control-Allow-Origin允許的地址

console報(bào)錯(cuò)信息

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;
//只允許單域名或者 ‘*' 。不推薦 ‘*' ，會(huì)導(dǎo)致安全問(wèn)題

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

nginx搭建文件服務(wù)器的詳細(xì)過(guò)程
這篇文章主要介紹了nginx搭建文件服務(wù)器,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
Nginx(PHP/fastcgi)的PATH_INFO問(wèn)題
PATH_INFO是一個(gè)CGI 1.1的標(biāo)準(zhǔn)，經(jīng)常用來(lái)做為傳參載體. 比如, 我們可以使用PATH_INFO來(lái)代替Rewrite來(lái)實(shí)現(xiàn)偽靜態(tài)頁(yè)面, 另外不少PHP框架也使用PATH_INFO來(lái)作為路由載體.
2011-08-08
Ubuntu上安裝Nginx服務(wù)器程序及簡(jiǎn)單的環(huán)境配置小結(jié)
Nginx是一款高性能的異步非阻塞服務(wù)器應(yīng)用程序,人氣相當(dāng)高,這里我們就來(lái)看一下在Ubuntu上安裝Nginx服務(wù)器程序及簡(jiǎn)單的環(huán)境配置小結(jié):
2016-07-07
Nginx中root與alias區(qū)別講解
這篇文章主要介紹了Nginx中root與alias區(qū)別?,通過(guò)兩個(gè)小例子來(lái)學(xué)習(xí)root和alias的區(qū)別，對(duì)Nginx中root與alias區(qū)別感興趣的朋友跟隨小編一起看看吧
2022-08-08
Logrotate如何實(shí)現(xiàn)每小時(shí)切割日志文件
這篇文章主要介紹了Logrotate如何實(shí)現(xiàn)每小時(shí)切割日志文件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
制作能在nginx和IIS中使用的ssl證書(shū)
現(xiàn)在的后端開(kāi)發(fā)，動(dòng)不動(dòng)就是需要https，或者說(shuō)是需要ssl證書(shū)，既然沒(méi)有正版的證書(shū)，那么我們只能自己制作ssl的證書(shū)了。證書(shū)的制作采用的是openssl工具，如果沒(méi)有，可以自行安裝下，因?yàn)楣P者是在linux（ubuntu）下制作，所以一般是使用包管理工具（apt）安裝好了的
2021-06-06
使用MongoDB分析Nginx日志的方法詳解
在項(xiàng)目開(kāi)發(fā)過(guò)程中,總是離不開(kāi)日志解析的工作,雖然有些時(shí)候覺(jué)得確實(shí)挺繁瑣的,但是靜下心來(lái)會(huì)發(fā)現(xiàn)有時(shí)候也是挺有趣的1件工作。下面這篇文章主要介紹了使用MongoDB分析Nginx日志的方法,需要的朋友可以參考借鑒，一起來(lái)看看吧。
2017-01-01
nginx配置域名訪問(wèn)時(shí)域名后出現(xiàn)兩個(gè)斜杠//的解決方法
最近這兩天重新寫(xiě)了一下我的個(gè)人網(wǎng)站，在阿里云新買(mǎi)了一臺(tái)服務(wù)器，配置好以后出現(xiàn)了一個(gè)問(wèn)題，就是輸入域名后域名地址會(huì)自動(dòng)在后面追加兩個(gè)斜桿,需要的朋友可以參考下
2020-07-07
Nginx服務(wù)狀態(tài)監(jiān)控的方法
這篇文章主要介紹了Nginx服務(wù)狀態(tài)監(jiān)控的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
nginx location匹配實(shí)例詳解
這篇文章主要介紹了nginx location匹配實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-06-06