ExpressJS报错：MIME类型'text/html'不支持为样式表类型

问题原因 #

你的Express服务器仅配置了根路径/的路由，当浏览器请求style.css或script.js时，没有匹配的路由处理这些静态资源请求，服务器会返回index.html（MIME类型为text/html），而浏览器期望样式表的MIME类型是text/css，因此触发错误。

解决方案 #

使用Express的express.static中间件托管静态文件，让服务器自动处理CSS、JS等静态资源的请求并设置正确的MIME类型。

修改你的app.js代码：

const express = require('express');
const path = require('path');
const app = express();

// 托管web目录下的静态资源（CSS、JS、HTML等）
app.use(express.static(path.join(__dirname, 'web')));

// 根路径路由可保留，静态托管后index.html会自动作为首页，也可删除此路由
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, "/web/index.html"));
});

app.listen(8080, () => {
  console.log('服务器运行在localhost:8080');
});

说明 #

• express.static会自动识别请求的静态资源，返回对应文件并设置正确的MIME类型，比如style.css会返回text/css类型，script.js会返回application/javascript类型。
• 确保style.css、script.js和index.html都在web目录下，与代码中指定的静态目录一致。

内容的提问来源于stack exchange，提问作者ProbablyNotKai