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

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

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值