404常见原因有三：一是相对路径跳转拼接错误，应改用绝对路径或new URL构造；二是HTML5 History模式未配服务端fallback；三是前后端路由冲突或base标签与构建路径不一致。
检查 location.href 跳转路径是否为相对路径且上下文错误
前端用 location.href = "user/profile" 这类相对路径跳转时，实际请求地址取决于当前页面 URL。比如当前在 /admin/ 下触发跳转，浏览器会请求 /admin/user/profile，而非预期的根路径 /user/profile。这种错位是 404 最常见原因。
- 用浏览器地址栏确认当前页面完整 URL，再心算相对路径拼接结果
- 优先改用绝对路径：
location.href = "/user/profile"（开头带/） - 若需动态拼接，用
new URL("user/profile", window.location).href安全构造
确认服务器是否启用 HTML5 History 模式且未配置 fallback
Vue Router、React Router 等前端路由启用 history 模式后，URL 看似正常（如 /about），但刷新时浏览器直接向服务器请求该路径。如果 Nginx/Apache 没配 fallback，就会返回 404——因为真实文件并不存在。
- Nginx 配置中必须包含类似
try_files $uri $uri/ /index.html;的 fallback 规则 - Apache 需启用
mod_rewrite并在.htaccess中添加重写规则，将非资源请求导向index.html - 静态托管服务（如 Vercel、Netlify）通常默认支持，但自建服务几乎一定需要手动配置
验证后端路由是否拦截了前端路由路径
当项目前后端同域且共用一个域名（如都走 https://api.example.com），而前端跳转到 /order/list 时，如果后端框架（如 Express、Spring Boot）恰好定义了同名 API 路由，就可能提前响应 JSON 或 404，导致前端路由根本没机会执行。
- 打开浏览器开发者工具 → Network 标签页，看 404 请求的
Response Headers中Content-Type是text/html还是application/json - 如果是后者，说明请求被后端路由捕获，需调整后端路由优先级，或约定前端路由统一加前缀（如
/app/xxx） - 检查后端日志，确认该路径是否真有对应 handler
排查 base 标签与构建输出路径不一致
location.href、 和 CSS 中的 url()。如果构建时设了 publicPath: "/subapp/"，但 HTML 中漏写或写错
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 源码中是否存在
href值是否与构建配置完全一致 - 若使用 Vue CLI 或 Vite，确认
vite.config.ts中base与部署路径匹配；Create React App 则检查homepage字段 - 临时删掉
