发现一个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不起作用