Node Express中CSS样式因MIME类型问题无法加载求助

问题根源 #

你的报错核心原因是静态资源目录路径配置错误：请求styles.css时，Express找不到该文件，返回了默认的HTML格式404页面，浏览器检测到返回内容的MIME类型是text/html而非预期的text/css，因此触发严格MIME检查报错。

从你的文件结构来看，public文件夹和backend文件夹是同级的，但你在server.js中配置的静态目录路径是基于backend目录的/public，这会让Express去backend/public下找静态资源，而实际styles.css在backend外的public里，路径完全不匹配。

修复步骤 #

1. 修正静态资源路径配置 #

首先确保你已经在server.js顶部引入了path模块（如果没加的话必须补上），然后修改静态目录的路径：

const express = require('express');
const path = require('path'); // 必须引入path模块
const app = express();

// 修正静态资源路径：往上退一级找到同级的public文件夹
app.use(express.static(path.join(__dirname, '../public')));

app.get('/', (req, res)=> {
    res.sendFile(path.join(__dirname, 'index.html'))
})

// 别忘了添加端口监听，比如：
app.listen(3000, () => {
    console.log('Server running on port 3000');
});

2. 检查HTML的link标签完整性 #

你的link标签缺少开头的<和结尾的>，这会导致浏览器无法正确识别该标签，补上后应为：

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

3. 验证修复效果 #

重启Express服务器，打开浏览器访问http://localhost:3000，此时styles.css应该能被正确加载，样式生效，报错也会消失。

额外排查点 #

• 确认public文件夹和styles.css的文件名拼写完全正确（注意大小写，Linux/macOS环境下文件名区分大小写）
• 如果静态资源仍无法加载，可以在浏览器开发者工具的「网络」标签中查看styles.css的请求状态：若返回404，说明路径仍有问题；若返回200，检查响应头的Content-Type是否为text/css

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