如何解决Express+Handlebars中API路由的CSS加载问题（不改路由）

这个问题的核心是浏览器对相对路径的解析逻辑差异，我来帮你拆解清楚并解决：

问题根源 #

你在main.handlebars里用了相对路径css/main.css，浏览器解析这个路径时会根据当前页面的URL来判断基准路径：

• 当页面URL是http://localhost:5000或http://localhost:5000/register时，浏览器把这些路径视为根目录下的文件，所以相对路径css/main.css会被解析为http://localhost:5000/css/main.css——这正好匹配你配置的静态资源目录（public对应根路径/），所以CSS能正常加载。
• 当页面URL是http://localhost:5000/api/posts时，浏览器会把这个路径视为**/api目录下的子路径**，相对路径css/main.css就被解析成了http://localhost:5000/api/css/main.css——这个路径不存在，服务器返回404页面（HTML类型），于是就出现了MIME类型不匹配的报错。

你的静态资源配置app.use(express.static(path.join(__dirname, 'public')));是完全正确的，问题出在前端的路径引用方式上。

不修改路由的解决方案 #

最直接且可靠的方法是使用绝对路径引用CSS，把main.handlebars里的link标签改成：

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

这里的/代表网站根目录，不管当前页面在哪个路由层级下，浏览器都会从http://localhost:5000/css/main.css加载资源，而这个路径正好对应你public/css/main.css文件。

可选的替代方案（适合多路由层级场景） #

如果你的项目有很多层级的路由，也可以在main.handlebars的<head>标签里添加<base>标签，统一设置页面所有相对路径的基准：

<base href="/">

这样页面里所有的相对路径都会以根目录为基准解析，后续引用图片、JS等资源也不用再写绝对路径了。

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