Node.js(Express)+EJS引入CSS文件报错：MIME类型不符

兄弟，我之前也踩过这个一模一样的坑！这个报错的核心原因是：你的服务器把CSS文件的请求当成了普通路由请求，返回了HTML内容（大概率是404页面），所以浏览器检测到MIME类型是text/html，就拒绝加载了。

咱们一步步来排查解决：

1. 先确认你的文件结构是否正确 #

你用了app.use(express.static("public"));，这意味着Express会把public文件夹作为静态资源的根目录。所以你的CSS文件必须放在public文件夹里，比如：

你的项目根目录
├── app.js
├── public
│   └── app.css  <!-- 你的CSS文件要在这里 -->
└── views
    ├── home.ejs
    └── posts
        └── xxx.ejs

2. 修正EJS里的CSS引用路径 #

你现在请求的是/posts/app.css，但这个路径对应的是public/posts/app.css（而你的CSS其实在public/app.css）。所以要把EJS里的link标签改成：

<link rel="stylesheet" href="/app.css">

如果你的CSS放在public/css子文件夹里，就改成/css/app.css，总之路径要对应public下的实际位置。

3. 确保静态资源中间件的顺序正确 #

Express是按代码顺序匹配中间件/路由的，一定要把express.static放在所有路由定义之前，比如：

var express = require('express');
var app = express();

// 先放静态资源中间件
app.use(express.static("public"));

// 再定义路由
app.get("/",function(req,res){
  res.render("home.ejs");
});

app.get("/posts",function(req,res){
  // ...你的路由逻辑
});

如果把路由放在前面，/posts的路由会拦截/posts/app.css的请求，返回HTML，导致MIME错误。

4. 额外检查：清除浏览器缓存 #

有时候浏览器会缓存旧的错误响应，按Ctrl+Shift+R强制刷新页面，再看看是否生效。

按照这几步来，应该就能解决这个问题啦！

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