Express.js无法应用CSS样式表 浏览器报MIME类型不匹配错误咨询

报错原因 #

你配置的express.static('public')会将public目录下的文件直接映射到服务的根路由下，即public/style.css对应的可访问地址是http://localhost:5000/style.css。
你当前HTML中填写的样式路径是public/style.css，实际发起的请求地址是http://localhost:5000/public/style.css，该路径没有匹配到对应的静态资源，Express默认返回了404的HTML响应，浏览器拿到的内容是HTML格式，MIME类型为text/html，不符合样式表要求，因此触发该报错。

解决方案 #

两种方案二选一即可：

• 方案一（推荐，路径更简洁）
  修改HTML中的样式引入代码，将：

<link rel="stylesheet" type="text/css" href="public/style.css" media="screen" />

替换为：

<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />

• 方案二（需要保留/public路径前缀的场景用）
  修改Express中的静态资源配置代码，将：

app.use(express.static('public'));

替换为：

app.use('/public', express.static('public'));

修改完成后重启Express服务，刷新页面即可生效。

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