ExpressJS多级路由路径下CSS样式不加载报错问题求助

问题原因 #

你在ejs模板中使用了相对路径引用CSS文件：

<link rel="stylesheet" href="styles.css">

相对路径会以浏览器当前访问的页面路径作为基准拼接资源地址：

• 访问localhost:3000时，基准路径是根路径，拼接后地址为http://localhost:3000/styles.css，匹配public目录下的CSS文件，加载正常
• 访问localhost:3000/r/test时，基准路径是/r/，拼接后地址为http://localhost:3000/r/styles.css，该路径不存在，express返回404页面（MIME类型为text/html），因此触发MIME类型不匹配的报错。

解决方法 #

把所有模板中CSS、JS、图片等静态资源的引用路径改为绝对路径，也就是在路径前加斜杠/：

<link rel="stylesheet" href="/styles.css">

加斜杠后，浏览器会永远以网站根路径为基准请求静态资源，无论当前路由层级是多少，都会正确请求http://localhost:3000/styles.css，匹配public目录下的文件，加载正常。

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