问题: 在没有将网站部署到nginx之前,一切运行正常,将网站部署到nginx之后,网页可以打开,但样式全都没有加载,浏览器里按下F12键,console有报错:
Resource interpreted as Stylesheet but transferred with MIME type text/plain
证明文件已经被找到,但是解析的格式不正确,由于这个问题是部署到nginx之后才发生的,因此从nginx的配置上找问题。
原因: 经过研究,发现需要引入mime.types这个文件,什么是MIME TYPES? Linux版本的Nginx部署应用时,会遇到CSS文件无法加载的情况。是由于通过yum安装的nginx默认会把css文件当作text/plain类型发送到浏览器,导致浏览器对css文件的加载方式不正确。我们在相关的配置文件中加入:
include mime.types; default_type application/octet-stream;
Nginx便会把CSS文件格式转换为 “Content-Type:text/css”,就可以正常加载了。
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.
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.
因此,有了MIME type,浏览器才知道该以何种方式处理文档,通过查阅官方文档,我们知道常用的两种mime type是: Two primary MIME types are important for the role of default types:
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.