HTML跳转404主因是路径解析与服务器响应不匹配：相对路径拼接错误、History模式缺服务端fallback、前后端路由冲突、base标签与构建配置不一致。
HTML页面跳转报404，八成是路径解析和服务器响应没对上——不是代码写错了，而是浏览器按当前URL拼出来的请求地址根本不存在。
location.href 跳转时相对路径拼错
用 location.href = "user/profile" 这种写法，浏览器会以当前页面 URL 为基准拼接。比如当前在 /admin/ 下，实际发出的请求是 /admin/user/profile，而非你想要的根路径 /user/profile。
- 改用绝对路径：
location.href = "/user/profile"（开头带/） - 动态拼接更安全：
new URL("user/profile", window.location).href，自动处理上下文 - 别依赖
./前缀——有些服务器或构建工具会忽略它，行为不一致
前端路由启用 history 模式但服务端没 fallback
Vue Router 或 React Router 的 history 模式让 URL 看起来干净（如 /about），但刷新时浏览器直接向服务器发请求。如果 Nginx/Apache 没配 fallback，就会返回 404。
- Nginx 配置必须含：
try_files $uri $uri/ /index.html;（放在location /块内） - Apache 需启用
mod_rewrite，并在.htaccess中加重写规则，把非资源请求导向index.html - Vercel/Netlify 默认支持；但本地用
npx serve或 Pythonhttp.server就不支持，必须换支持 history fallback 的工具（如vite preview）
后端路由拦截了前端跳转路径
前后端同域部署时（比如都走 https://api.example.com），前端跳到 /order/list，结果被后端 Express/Spring Boot 的同名 API 路由提前捕获，返回 JSON 或 404，前端路由压根没执行。
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具 → Network 标签页，看 404 请求的
Response Headers中Content-Type是application/json还是text/html - 如果是前者，说明后端已响应，需调整后端路由优先级，或给前端路由统一加前缀（如
/app/order/list） - 检查后端日志，确认该路径是否真有 handler，避免“撞名”覆盖
<base> 标签与构建配置不匹配
<base href="/subapp/"> 会影响所有相对路径解析，包括 location.href、<script src> 和 CSS 中的 url()。漏写、多写斜杠、或跟构建配置（如 Vite 的 base、CRA 的 homepage）不一致，都会导致跳转和资源加载双双失效。
- 查看 HTML 源码，确认是否存在
<base>标签，且href值与部署路径完全一致（注意结尾斜杠） - Vite 项目检查
vite.config.ts中base是否设为"/subapp/"；CRA 项目检查package.json的homepage字段 - 若未使用子路径部署，就别写
<base>——多数现代构建工具默认不需要它
最容易被忽略的是：路径问题从来不是单一环节的事。你改了 location.href，但忘了服务端没 fallback；你配了 fallback，又撞上后端路由；你清了缓存，却没查 <base> 是否生效。每一步都得独立验证，不能靠“应该没问题”跳过。
