Express.js渲染EJS页面引入CSS报MIME类型为text/html错误如何解决

你遇到的报错本质是/cssFile/style.css请求未匹配到静态资源文件，Express默认返回了404状态的HTML响应，因此浏览器收到的MIME类型为text/html，和样式文件要求的text/css不符，触发了严格MIME检查的拦截逻辑。

可行解决方案（二选一即可） #

方案1：调整目录结构适配现有配置 #

你当前的Express静态资源托管规则指向的是项目根目录下的public文件夹，但是你的cssFile文件夹直接存放在根目录，不在public内，因此无法被匹配到。
你只需要调整项目结构，将cssFile整个文件夹移入public目录，调整后结构如下：

public
 | cssFile
 |   | style.css
views
 | htmlFile
 |   | home.ejs
index.js

调整后无需修改ejs文件内的样式引入代码，重启服务即可生效。

方案2：修改静态资源配置适配现有目录 #

如果你不想调整目录结构，可以直接在Express代码中新增cssFile目录的静态资源托管规则，新增一行配置即可：

// 在原有app.use(express.static(...))代码附近新增
app.use('/cssFile', express.static(path.join(__dirname, 'cssFile')))

该配置会将所有/cssFile/开头的请求，映射到根目录下的cssFile文件夹中匹配资源，无需修改ejs引入代码，重启服务即可生效。

验证与注意事项 #

• 所有路径拼接建议使用path.join()方法，避免不同操作系统的路径分隔符差异导致的匹配失败，例如原静态资源配置可优化为：app.use(express.static(path.join(__dirname, 'public')))
• 修改配置后必须重启Express服务，新规则才会生效
• 可直接在浏览器地址栏输入http://localhost:2000/cssFile/style.css验证资源是否可以正常访问，若能看到css文件内容则说明配置生效，再刷新页面即可加载样式。

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