Nginx静态文件(css,js)不生效Resource interpreted as Stylesheet but transferred with MIME type text/plain

2019-09-09 15:593943

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

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

问题:

在没有将网站部署到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


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

————————————————

版权声明:本文为CSDN博主「eponia」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

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

QQ图片20190909160350.png

上一篇: 明日之后红杉镇探索宝箱在哪?明日之后红杉镇宝箱位置

下一篇: 获取当前分类所在顶级分类的子分类列表


注:本文转载自blog.csdn.net,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。