使用Express.js托管静态文件遇MIME类型错误，求排查解决方法

嘿，这个问题我之前也碰到过，本质是Express返回了404的HTML页面（而不是你请求的CSS文件），所以浏览器拿到的MIME类型是text/html，自然就触发了这个报错。咱们一步步拆解问题和解决方法：

问题根源 #

先看你的代码：

const express = require('express') 
const app = express() 
app.use(express.static('public')) 
app.listen(8888, () => console.log('listening on port 8888!'))

你用express.static('public')把public文件夹设为了静态资源的根目录——也就是说，当你请求http://localhost:8888/css/main.xxx.css时，Express会去public/css/main.xxx.css找文件。

但你现在的请求路径是http://localhost:8888/static/css/main.5a7f7b3b.css，这意味着Express会去public/static/css/main.5a7f7b3b.css找文件，而你的CSS文件大概率是放在public/css/下面的，所以找不到文件，就返回了默认的404 HTML页面，导致MIME类型不匹配。

两种解决方法 #

方法一：修改后端的静态资源挂载路径 #

把静态资源的挂载路径改成/static，这样所有以/static开头的请求都会映射到public文件夹：

const express = require('express') 
const app = express() 
// 新增了'/static'前缀，匹配请求路径
app.use('/static', express.static('public')) 
app.listen(8888, () => console.log('listening on port 8888!'))

这样请求/static/css/main.5a7f7b3b.css就会对应public/css/main.5a7f7b3b.css，能正确找到文件并返回正确的MIME类型。

方法二：修改前端的资源引用路径 #

如果不想改动后端代码，直接把前端里引用CSS的路径从/static/css/main.5a7f7b3b.css改成/css/main.5a7f7b3b.css，这样就能匹配到public文件夹下的css目录里的文件。

额外验证步骤 #

最后确认下你的项目文件结构是不是这样的（如果结构不对也要对应调整express.static的参数）：

你的项目根目录
├── public
│   └── css
│       └── main.5a7f7b3b.css
└── app.js

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