解決nginx加載css文件時(shí)無(wú)效問(wèn)題(識(shí)別成 text/plan)
1、問(wèn)題描述
今天遇到個(gè)問(wèn)題，發(fā)現(xiàn)明明css文件已經(jīng)加載成功了，但是頁(yè)面上的樣式死活沒(méi)展示出來(lái)，如下圖
2、分析
通過(guò)本地打開(kāi)這個(gè)項(xiàng)目是正常的，但是部署到線上后就不行了，想了下。這個(gè)靜態(tài)頁(yè)面是直接放在nginx的 html目錄下的，那就應(yīng)該跟nginx有關(guān)；這是本地項(xiàng)目，css文件是可以正常訪問(wèn)的，并且content-type 是 text/css,
而線上項(xiàng)目雖然可以正常訪問(wèn)css文件，但是連content-type都沒(méi)有，或者是 text/plan,反正不是text/css, 這就難怪了，瀏覽器是根據(jù)你的content-type來(lái)識(shí)別靜態(tài)文件的，你給錯(cuò)文件類(lèi)型，就別怪瀏覽器沒(méi)渲染；
3、解決
知道問(wèn)題了，那我們就可以來(lái)著手解決了，需要在nginx的配置文件中修改配置，在 nginx.conf 中的 http{}塊內(nèi)加入以下配置即可
# mime.types 以自己的實(shí)際路徑為準(zhǔn)，一般情況下，nginx 都會(huì)帶有這個(gè)文件 include /etc/nginx/mime.types; default_type application/octet-stream;
加好后如下圖
然后重啟nginx，再次訪問(wèn)，已經(jīng)可以正常顯示樣式內(nèi)容了，且 content-type 也是text/css
到此這篇關(guān)于解決nginx加載css文件時(shí)無(wú)效問(wèn)題(識(shí)別成 text/plan)的文章就介紹到這了,更多相關(guān)nginx加載css文件時(shí)無(wú)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Nginx配置SSL證書(shū)部署HTTPS網(wǎng)站的方法（頒發(fā)證書(shū)）
這篇文章主要介紹了Nginx配置SSL證書(shū)部署HTTPS網(wǎng)站的方法（頒發(fā)證書(shū)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
文章簡(jiǎn)要介紹了如何檢查Nginx配置文件是否正確的方法,包括進(jìn)入配置文件路徑、返回結(jié)果判斷正確性以及兩種啟動(dòng)方式,希望對(duì)大家有所幫助2025-11-11
nginx配置ssl實(shí)現(xiàn)https訪問(wèn)的步驟（適合新手）
這篇文章主要給大家介紹了關(guān)于nginx配置ssl實(shí)現(xiàn)https訪問(wèn)的相關(guān)資料，這個(gè)教程非常適合新手小白，文中通過(guò)示例代碼將實(shí)現(xiàn)的方法一步步介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧2018-12-12
本描述重點(diǎn)講解了Nginx配置中如何阻止未綁定特定域名的訪問(wèn),通過(guò)設(shè)置默認(rèn)server塊和明確指定server名稱(chēng),確保只有合法請(qǐng)求能夠匹配成功,從而避免非法訪問(wèn)的問(wèn)題2026-05-05
本篇文章主要介紹了詳解Nginx反向代理到Tomcat服務(wù)器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要介紹了詳解 Nginx 301重定向的配置的相關(guān)資料,需要的朋友可以參考下2017-03-03
Nginx禁用TLSv1.0?1.1改為T(mén)LSv1.2?1.3的操作方法
使用Mozilla?SSL配置工具生成配置,修改nginx.conf的ssl_protocols和ssl_ciphers,通過(guò)ssllabs檢測(cè)及Linux命令測(cè)試TLS版本支持情況,確保網(wǎng)站SSL安全配置生效,本文給大家介紹Nginx禁用TLSv1.0?1.1改為T(mén)LSv1.2?1.3的操作方法,需要的朋友一起看看吧2025-08-08
本文給大家匯總介紹了nginx中使用rewrite偽靜態(tài)正則表達(dá)式的資源，非常的全面詳細(xì)，有需要的小伙伴可以參考下2016-08-08
Nginx配置?location模塊實(shí)現(xiàn)路由(反向代理、重定向)功能
本文主要介紹了Nginx配置?location模塊實(shí)現(xiàn)路由(反向代理、重定向)功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
訂單系統(tǒng)增加附件預(yù)覽,下載的功能,但是這個(gè)附件是客戶(hù)推單時(shí)推送過(guò)來(lái)的,文件連接是類(lèi)似oss連接,但是是客戶(hù)的域名,所以導(dǎo)致跨域問(wèn)題,本文小編將給大家介紹如何用nginx解決前端js下載跨域問(wèn)題,需要的朋友可以參考下2023-10-10