Node.js中CSS样式无法加载：MIME类型错误问题求助

问题原因 #

你的express.static中间件配置的静态资源路径错误，导致服务器无法正确找到style.css文件。当浏览器请求/style.css时，因为没有匹配到对应的静态资源，服务器会走根路由的响应返回index.html文件，此时文件的MIME类型是text/html，不符合样式表要求的text/css，触发了浏览器的严格MIME检查报错。

具体来说：server.js位于js文件夹下，__dirname代表当前脚本所在的js目录路径，你写的__dirname + '/views'会指向js/views，但实际views目录在js的上级目录，这个路径不存在，导致静态资源中间件无法生效。

修复方法 #

修改server.js里的静态资源中间件配置，用path.join拼接正确的路径：

// 替换原来的app.use(express.static(__dirname + '/views'));
app.use(express.static(path.join(__dirname, '../views')));

修改后，Express就能正确识别views目录下的静态资源，浏览器请求/style.css时会返回正确的CSS文件，MIME类型自动设为text/css，样式就能正常加载，按钮会显示红色背景。

验证 #

重启服务器后，访问localhost:8080，查看控制台是否还有报错，同时检查按钮背景是否变为红色。

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