HTML导航链接报404主因是浏览器拼出的请求URL与服务器可响应路径不匹配，须通过开发者工具Network面板查看标红请求的Request URL以准确定位问题，再针对性修正路径或配置。
HTML导航链接报404，基本不是链接“写错了”，而是浏览器拼出的请求地址和服务器实际能响应的路径对不上——得看 Network 里红字那条请求到底发去了哪儿。
用开发者工具确认真实请求 URL
这是所有修复动作的前提。不看 Network，光改 href 就是蒙眼调试。
- 按 F12 打开开发者工具 → 切到
Network标签 → 勾选Preserve log - 点击那个报 404 的导航链接
- 在列表里找标红的那条（Status 是
404），点开 → 看Headers里的Request URL - 这个 URL 就是你必须对齐的目标：比如显示的是
http://localhost/about，但你的文件实际在about/index.html或pages/about.html，那就得改引用或调整服务配置
href 值是相对路径时，拼接逻辑容易误判
href="about.html" 和 href="./about.html" 在多数场景下行为一致，但一旦当前页面 URL 带子路径（如 /blog/post1），它们都会被拼成 /blog/about.html —— 而你本意可能是根路径下的 /about.html。
- 明确要跳转到站点根目录？开头加斜杠：
href="/about.html" - 动态生成链接更稳妥：
new URL("about.html", window.location).href，它会自动按当前页面上下文解析，避免手误 - 别依赖
./前缀：某些构建工具（如旧版 Webpack Dev Server）或静态托管平台会忽略它，行为不统一
前端路由 history 模式没配服务端 fallback
Vue Router 或 React Router 开启了 history 模式，导航看着干净（/contact），但刷新就 404 —— 因为浏览器直接向服务器要 /contact 这个路径，而服务器根本没这文件。
立即学习“前端免费学习笔记（深入）”；
- Nginx 必须在
location /块里加：try_files $uri $uri/ /index.html; - Apache 需启用
mod_rewrite，并在.htaccess中加重写规则，把非资源请求导向index.html - Vercel/Netlify 默认支持；但本地用
npx serve -s或python -m http.server不支持，得换vite preview或serve -s
后端路由拦截了前端跳转路径
前后端同域部署（如都走 https://api.example.com），你点导航跳到 /orders，结果后端 Express/Spring Boot 的 /orders API 路由先响应了，返回 JSON 或 404，前端路由压根没机会执行。
- 打开 Network，看 404 请求的
Response Headers里Content-Type是application/json还是text/html - 如果是前者，说明后端已处理，需调整后端路由顺序（让前端兜底路由放最后），或给前端路径统一加前缀（如
/app/orders） - 检查后端日志，确认该路径是否真有 handler，避免“撞名”覆盖
最容易被忽略的一点：404 不是“文件丢了”，而是“服务器说找不到”。哪怕你本地文件结构完全正确，只要没用 HTTP 服务访问（比如双击打开 file:///），就不会触发 404 —— 它只会报 Not allowed to load local resource。所以第一步永远是：确保你在用 http://localhost:xxx 测试。
