使用Node.js+Express运行项目时CSS无法加载及MIME类型报错问题求解

问题原因 #

• 你编写的Express代码中存在两个完全相同的GET /路由，Express的路由匹配逻辑是从上到下顺序执行，第一个匹配到的路由会直接返回index.html。当浏览器请求/style.css时，没有对应的路由规则处理该请求，最终返回的是HTML格式的响应内容，这就是控制台提示MIME类型为text/html的原因。
• 你第二个路由的路径配置错误，要匹配CSS资源请求，路径应该设置为/style.css而非/。
• 你贴出的服务端代码还遗漏了express模块的引入语句，直接执行会报错。

修复方案 #

方案1：使用express内置静态资源中间件（推荐） #

直接用express.static托管项目根目录下的所有静态文件，不需要手动为每个静态资源编写路由，Express会自动处理MIME类型匹配，修改后的服务端代码如下：

const express = require('express');
const path = require('path');
const app = express();

// 托管当前目录下的所有静态资源，html、css、js等文件都可以被直接访问
app.use(express.static(__dirname));

app.listen(process.env.PORT || 8080, () => console.log('App available on http://localhost:8080'))

方案2：手动修正路由配置 #

如果你不想使用静态资源中间件，直接修改第二个路由的路径匹配规则即可：

const express = require('express');
const path = require('path');
const app = express();

app.get('/', (request, response) => {
    response.sendFile(path.join(__dirname, "index.html"))
});

// 修改路径为/style.css匹配CSS资源请求
app.get('/style.css', (request, responseC) => {
    responseC.sendFile(path.join(__dirname, "style.css"))
});

app.listen(process.env.PORT || 8080, () => console.log('App available on http://localhost:8080'))

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