Web部署到Nginx后静态文件加载不正常（MIME TYPE问题）

最新推荐文章于 2025-06-18 10:26:01 发布

转载最新推荐文章于 2025-06-18 10:26:01 发布 · 4.8k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/m0_37904728/article/details/78745243

nginx+tomcat集群专栏收录该内容

14 篇文章

订阅专栏

部署网站至Nginx后，样式未加载，浏览器显示资源被解释为样式表但以text/plain类型传输。原因是未正确配置MIME类型，导致浏览器以错误格式处理CSS和JS文件。解决方法是在Nginx配置文件中指定默认MIME类型为application/octet-stream，并重启服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：
在没有将网站部署到nginx之前，一切运行正常，将网站部署到nginx之后，网页可以打开，但样式全都没有加载，浏览器里按下F12键，console有报错：

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

证明文件已经被找到，但是解析的格式不正确，由于这个问题是部署到nginx之后才发生的，因此从nginx的配置上找问题。

原因：
经过研究，发现需要引入mime.types这个文件，什么是MIME TYPES？

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.

如果不指定mime type，则默认会以text/plain的形式处理，也就是说，浏览器会以纯文本的形式来处理css和js文件，所以无法正常加载样式。

解决方法：
在Nginx的配置文件中指定默认的MIME type，从上面的引用中，我们得知一般指定为application/octet-stream即可，在CentOS7下，修改配置文件/etc/nginx/nginx.conf, 在http{ }中添加下面两行：

include /etc/nginx/mime.types;
default_type application/octet-stream;

重启nginx服务：

service nginx restart

再加载网站即可恢复正常了。