Express应用HTML无法加载CSS：MIME类型错误排查求助

嘿，别慌，这其实是个很常见的小误区！我马上帮你搞定这个问题。

问题根源 #

你在app.js里配置了express.static中间件，把public文件夹设为了静态资源的根目录：

app.use(express.static(path.join(__dirname, 'public')));

这意味着public文件夹里的所有内容，都直接对应网站的根路径/。比如public/css/style.css这个文件，访问路径应该是http://localhost:8080/css/style.css——这也和你说的“访问这个路径能找到文件”完全对应上了。

但你在home.html里写的CSS引用路径多了个/public前缀：

<link rel="stylesheet" type="text/css" href="/public/css/style.css">

这相当于让浏览器去public/public/css/style.css里找文件，显然这个路径不存在，所以样式自然加载失败。

解决方法 #

只需要把home.html里的CSS引用路径改成不带public的版本就行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <title>Express</title>
</head>
<body>
  <h1>Express</h1>
</body>
</html>

额外验证小技巧 #

你可以再试试访问http://localhost:8080/css/style.css，能正常看到CSS内容就说明静态资源配置是没问题的，只要调整页面里的引用路径就能解决样式不生效的问题。

内容的提问来源于stack exchange，提问作者Krzysztof Kaczyński