EJS渲染resetpassword页面时CSS失效但POST请求时正常是什么原因？

核心原因 #

你的resetpassword接口使用了多级动态路由（格式通常为/resetpassword/:id/:token），如果EJS中CSS引用使用的是相对路径，浏览器会基于当前页面的URL层级拼接资源地址，导致寻址错误：

例如你写的<link rel="stylesheet" href="css/style.css">，在根路径页面会请求/css/style.css，但在/resetpassword/123/abc456页面会请求/resetpassword/123/css/style.css，资源不存在返回404，自然无法加载样式。

修复方案 #

任选一种即可：

• 修改CSS引用为绝对路径，在路径开头添加/，示例：
  把<link rel="stylesheet" href="css/style.css">改为<link rel="stylesheet" href="/css/style.css">，浏览器会直接从站点根目录请求资源，不受当前路由层级影响
• 如果你使用Express作为后端，也可以通过模板变量统一注入静态资源前缀，避免硬编码路径问题。

验证方法 #

修改后重启服务，打开resetpassword页面，按F12打开开发者工具切换到「网络」面板，刷新页面查看CSS请求的状态码，状态码为200即修复完成，样式会正常渲染。

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