Express访问/home/download页面无法加载静态文件（EJS渲染场景）求助

这是前端静态资源相对路径解析规则导致的加载失败：
你在EJS模板中引用css、js、图片等静态资源时用了相对路径（例如css/main.css、./js/common.js这类不带开头斜杠的写法），浏览器会把相对路径和当前页面的URL路径拼接后发起请求：

• 访问/或/home路径时，浏览器认为当前路径的父级是根目录，拼接后的请求地址为/css/main.css，和你public目录下的静态资源路径匹配，所以可以正常加载
• 访问/home/download两级路径时，浏览器认为当前路径的父级是/home/，拼接后的请求地址为/home/css/main.css，而public目录下不存在对应路径的资源，所以全部加载失败

你的Express静态资源托管配置本身没有问题。

任选以下一种方式即可解决：

• 方式一：所有静态资源引用改为绝对路径
  把模板里所有静态资源的引用路径开头加/，示例修改如下：

  <!-- 原写法 -->
  <link rel="stylesheet" href="css/style.css">
  <script src="js/app.js"></script>
  <img src="imgs/logo.png">
  
  <!-- 修改后 -->
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/app.js"></script>
  <img src="/imgs/logo.png">
  

  加了开头的/后，浏览器会始终从网站根目录发起请求，不会和当前页面路径拼接。
• 方式二：在HTML头部添加base标签
  在所有页面的<head>标签内添加如下代码：

  <base href="/">
  

  这个标签会指定当前页面所有相对路径的基础解析路径为根目录，不需要逐个修改静态资源引用，适配成本最低。注意如果页面用到了锚点跳转，原本的#section写法会失效，需要改为完整路径/home/download#section。
• 方式三：给静态资源托管添加统一前缀（可选）
  如果你想统一区分静态资源请求和接口请求，也可以修改静态资源托管配置添加虚拟前缀：

  app.use('/static', express.static(path.join(__dirname, "public")))
  

  之后所有静态资源都用/static/xxx的路径引用即可，例如<link rel="stylesheet" href="/static/css/style.css">。

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