Node.js中Express结合EJS时CSS样式失效问题求助

首先，我们聚焦控制台里最关键的第二个错误：Refused to apply styles from 'http://localhost:5000/css/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type。这个错误说明你的服务器在处理CSS请求时，返回的是HTML内容（大概率是404页面），而不是正确的CSS文件。结合你的代码和文件结构，问题出在两个核心环节：静态文件路径配置错误，以及EJS页面的渲染方式不当。

1. 修复静态文件服务路径 #

你的index.js中，静态文件的路径设置成了绝对路径/public，这会让Express去系统根目录寻找public文件夹，而不是你项目里的src/public。修改这一行：

// 原错误代码
app.use(express.static('/public'))

// 修改为：
app.use(express.static(path.join(__dirname, 'public')))

__dirname代表当前index.js所在的src目录，结合public后，Express就能正确定位到你的CSS、图片等静态资源文件夹了。

2. 修复EJS页面的渲染方式 #

你在路由中用res.sendFile直接发送EJS文件，还手动设置Content-Type: text/html，这是错误的做法。EJS需要通过Express的模板引擎渲染成HTML后再发送，而不是直接传递原文件。修改路由代码：

// 原错误代码
router.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html')
    res.sendFile('home.ejs', options);
})

// 修改为：
router.get('/', (req, res) => {
    res.render('home');
})

因为你已经在index.js中正确配置了views目录和view engine: ejs，res.render('home')会自动找到views/home.ejs，渲染成标准HTML后发送给浏览器，不需要额外配置路径或Content-Type。

3. 验证与测试 #

完成上述修改后，重启服务器：

• 访问http://localhost:5000/，页面应该能正常加载，CSS样式生效。
• 控制台的两个错误都会消失：CSS的MIME类型错误解决后，页面加载恢复正常，indexedDB的衍生错误也会自动消失。

为什么这些修改有效？ #

• 静态文件路径修复后，Express能正确映射/css/main.css到src/public/css/main.css，返回正确的CSS文件（MIME类型为text/css），浏览器就能正常解析样式了。
• 用res.render替代res.sendFile，让Express正确处理EJS模板，返回渲染后的HTML页面，从根源上解决了浏览器下载EJS文件的问题。

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