h5應用通過Nginx代理,css沒法加載的問題

問題: 在沒有將網站部署到nginx以前,一切運行正常,將網站部署到nginx以後,網頁能夠打開,但樣式全都沒有加載,瀏覽器裏按下F12鍵,console有報錯:css

Resource interpreted as Stylesheet but transferred with MIME type text/plainnginx

證實文件已經被找到,可是解析的格式不正確,因爲這個問題是部署到nginx以後才發生的,所以從nginx的配置上找問題。瀏覽器

緣由: 通過研究,發現須要引入mime.types這個文件,什麼是MIME TYPES? Linux版本的Nginx部署應用時,會遇到CSS文件沒法加載的狀況。是因爲經過yum安裝的nginx默認會把css文件看成text/plain類型發送到瀏覽器,致使瀏覽器對css文件的加載方式不正確。咱們在相關的配置文件中加入:markdown

include mime.types; default_type application/octet-stream;app

Nginx便會把CSS文件格式轉換爲 「Content-Type:text/css」,就能夠正常加載了。oop

Windows版本的Nginx,可能因爲預先編譯了全部的功能,就沒有出現這個問題。即便不配置上面兩行參數,Nginx也能自動正確加載css文件的格式。網站

The Multipurpose Internet Mail Extensions (MIME) type is a standardized way to indicate the nature and format of a document. It is defined and standardized in IETF RFC 6838. The Internet Assigned Numbers Authority (IANA) is the official body responsible to keeping track of all official MIME types, and you can find the most up-to-date and complete list at the Media Types page.this

Browsers often use the MIME type (and not the file extension) to determine how it will process a document; it is therefore important that servers are set up correctly to attach the correct MIME type to the header of the response object.spa

所以,有了MIME type,瀏覽器才知道該以何種方式處理文檔,經過查閱官方文檔,咱們知道經常使用的兩種mime type是: Two primary MIME types are important for the role of default types:code

text/plain is the default value for textual files. A textual file should be human-readable and must not contain binary data. application/octet-stream is the default value for all other cases. An unknown file type should use this type. Browsers pay a particular care when manipulating these files, attempting to safeguard the user to prevent dangerous behaviors.

相關文章
相關標籤/搜索