已配置静态资源仍报错：Express加载CSS时出现MIME类型错误

核心错误定位 #

• Express 中间件传参逻辑存在隐患：Server.js 中 app.use(router, express.static('public')) 写法虽然能被Express的参数识别逻辑兼容，但拆分不清晰，且静态资源服务用相对路径寻址，容易受启动工作目录影响出现路径偏差。
• 静态资源引用路径错误：express.static 会把传入的目录作为静态资源访问的根路径。将 public 目录设为静态资源根后，public/styles/customStyles.css 的可访问路径为 /styles/customStyles.css，无需额外加 /public 前缀。当前写法会让服务器寻址 public/public/styles/customStyles.css，最终返回404的HTML响应内容，浏览器拿到预期外的非CSS类型响应，就会触发MIME类型匹配错误。
• 路由路径拼接兼容问题：router.js 中未引入 path 模块做跨平台路径兼容，且定义的 pages 变量无实际使用，属于冗余代码。

修正后的代码 #

修正后的 Server.js #

const express = require('express');
const app = express();
const router = require("./router");
const path = require("path");

const PORT = 3000; 

// 拆分挂载逻辑，先注册业务路由，再注册静态资源服务
app.use(router);
// 用绝对路径指定静态资源根目录，避免相对路径寻址偏差
app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
    console.log("Listening on port: " + PORT);
});

修正后的 index.html 样式引用片段 #

<!-- 去掉/public前缀，匹配静态资源根路径映射规则 -->
<link rel="stylesheet" href="/styles/customStyles.css">

优化后的 router.js #

const express = require('express');
const router = express.Router();
const path = require('path');

router.get('/home', (req, res) => {
    // 使用path.join做跨平台兼容的路径拼接
    res.sendFile(path.join(__dirname, "public/pages/home/index.html"))
})

module.exports = router;

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