Nginx配置缺失导致CSS不起作用
Nginx配置缺失导致CSS不起作用
发现一个css加载的问题，从而定位到nginx配置缺失的原因.请关注，转发，点在看，谢谢！
问题
index.html文件
!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="app">
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab } ]"
v-on:click="currentTab = tab"
>
</div>
<script src="js/index.js"> </script>
</body>
</html>启动nginx，打开网页，发现样式并没有如期加载，看chrome的console，显示如下：
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://127.0.0.1/css/index.css". 127.0.0.1/:5 定位
这个问题很让人疑惑，到网上找了一下答案，比如这个https://stackoverflow.com/questions/41734976/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-javascrip/51828183，按照高赞答案来试了一下，把rel="stylesheet"去掉，index.css根本就不加载了。
说明高赞答案是不行的，倒是上面链接下有这样一段话，给人有启发意义：
Mime types are set by the sender of the file, in this case a web server. The error message says that a file sent as plain text by the server, was interpreted as CSS by the browser. In this case the problem is in the server, not in the browser. The browser correctly interpreted this CSS file as a stylesheet. The server should have sent the right mime type.
看请求index.css这个文件的请求头部：
GET /css/index.css HTTP/1.1
Host: 127.0.0.1
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: "Chromium";v="88", "Google Chrome";v="88", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36
Accept: text/css,*/*;q=0.1
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: style
Referer: http://127.0.0.1/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: django_language=zh; csrftoken=1XmtJTeDT81bPyM4Av6qNSznMlPJkIdLMS3uGEbKJWohGU6rf7UtsqV3ezCjeGPv请求头部Accept字段说明是接收text/css，这看起来没问题。看一下响应头部
HTTP/1.1 200 OK
Server: nginx/1.18.0
Date: Mon, 15 Feb 2021 16:14:40 GMT
Content-Type: text/plain
Content-Length: 383
Last-Modified: Mon, 15 Feb 2021 15:53:32 GMT
Connection: keep-alive
ETag: "602a98fc-17f"
Accept-Ranges: bytes响应头部的Content-Type字段返回的竟然是text/plain， 而不是text/css。这就很有问题了。难道nginx不能够返回text/css？
看一下nginx的安装，看一下nginx对mime types的支持。由于nginx是用apt安装的，那么，它的mime types支持文件应该是/etc/nginx/mime.types.
types {
text/html html htm shtml;
text/css css;
text/xml xml;
image/gif gif;
image/jpeg jpeg jpg;
application/javascript js;
application/atom+xml atom;
application/rss+xml rss;
text/mathml mml;
text/plain txt;
text/vnd.sun.j2me.app-descriptor jad;
text/vnd.wap.wml wml;
text/x-component htc;
image/png png;
image/tiff tif tiff;
image/vnd.wap.wbmp wbmp;
image/x-icon ico;
image/x-jng jng;
image/x-ms-bmp bmp;
image/svg+xml svg svgz;
image/webp webp;
application/font-woff woff;
application/java-archive jar war ear;
application/json json;
application/mac-binhex40 hqx;
application/msword doc;
application/pdf pdf;
application/postscript ps eps ai;
application/rtf rtf;
application/vnd.apple.mpegurl m3u8;
application/vnd.ms-excel xls;
application/vnd.ms-fontobject eot;
application/vnd.ms-powerpoint ppt;
application/vnd.wap.wmlc wmlc;
application/vnd.google-earth.kml+xml kml;
application/vnd.google-earth.kmz kmz;
application/x-7z-compressed 7z;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-redhat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/xhtml+xml xhtml;
application/xspf+xml xspf;
application/zip zip;
application/octet-stream bin exe dll;
application/octet-stream deb;
application/octet-stream dmg;
application/octet-stream iso img;
application/octet-stream msi msp msm;
application/vnd.openxmlformats-officedocument.wordprocessingml.document docx;
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx;
application/vnd.openxmlformats-officedocument.presentationml.presentation pptx;
audio/midi mid midi kar;
audio/mpeg mp3;
audio/ogg ogg;
audio/x-m4a m4a;
audio/x-realaudio ra;
video/3gpp 3gpp 3gp;
video/mp2t ts;
video/mp4 mp4;
video/mpeg mpeg mpg;
video/quicktime mov;
video/webm webm;
video/x-flv flv;
video/x-m4v m4v;
video/x-mng mng;
video/x-ms-asf asx asf;
video/x-ms-wmv wmv;
video/x-msvideo avi;
}可见nginx是支持text/css的。难道是nginx的配置文件并没有把mime.types包括进去？
因为这个配置文件是裸写的，并不是改自默认的。看一下内容：
剩余内容请关注本人公众号debugeeker, 链接为Nginx配置缺失导致CSS不起作用
腾讯云开发者
