带路由参数时Express静态资源路由报错问题求助

你访问http://localhost:3000/profile/someId时，浏览器会把HTML里的相对路径./css/profile.css解析成/profile/css/profile.css——这是因为相对路径是基于当前页面的URL路径计算的，而非项目根目录。而你的Express静态资源中间件是把public文件夹映射到根路径/，所以/profile/css/profile.css这个路由根本不存在，Express返回的是默认404页面（HTML格式），浏览器拿到的不是CSS文件，自然触发MIME类型不匹配的错误。

当路由是/profile时，相对路径./css/profile.css会被解析成/css/profile.css，刚好匹配静态资源的实际路径，所以能正常加载。

有两种简单有效的解决办法：

方法1：改用绝对路径引用静态资源 #

直接把HTML里的CSS引用改成从根目录开始的绝对路径：

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

不管当前页面URL是什么，浏览器都会从http://localhost:3000/css/profile.css请求资源，刚好对应public/css/profile.css文件，能被Express的静态资源中间件正确处理。

方法2：添加<base>标签指定基准路径 #

在HTML的<head>里加个<base>标签，告诉浏览器所有相对路径都基于根目录解析：

<head>
  <base href="/">
  <link rel="stylesheet" href="./css/profile.css">
</head>

这样就算页面URL是/profile/someId，./css/profile.css也会被解析成/css/profile.css，同样能正常加载资源。

你当前的Express静态资源配置app.use(express.static(path.join(__dirname, 'public')));是完全正确的，它已经把public文件夹挂载到了网站根路径，问题纯粹出在前端的资源引用路径上。

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