404错误本质是服务器明确返回“找不到资源”，修复关键在于对齐路径、服务配置与上下文；需通过Network面板确认真实Request URL，检查大小写、编码、base标签、history模式fallback及前后端路由冲突。
404错误链接不是页面“坏了”，而是浏览器发出了一个请求，服务器明确回了“找不到”——修复重点不在HTML本身，而在路径、服务配置和上下文三者的对齐。
检查 Network 面板里的真实 Request URL
打开开发者工具 → Network 标签 → 刷新页面 → 找红色标出的 404 请求项，点开看 Headers 下的 Request URL。这个地址才是服务器真正收到的，也是你要校准的目标。
- 如果显示
http://localhost/css/style.css，但文件实际在assets/css/style.css，就该改 HTML 中的<link href="assets/css/style.css"> - URL 含中文或
ö等字符时，浏览器自动编码成%C3%B6；若文件系统里存的是未编码名（如cafe.html），就会 404——静态资源建议全用 ASCII 命名 - Linux/macOS 服务器区分大小写：
IMG.JPG≠img.jpg，Windows 下可能不报错，但上线必 404
location.href 跳转时相对路径拼接错误
写 location.href = "user/profile"，当前页面在 /admin/ 下，浏览器实际请求的是 /admin/user/profile，而非你预期的根路径。
- 改用绝对路径：
location.href = "/user/profile"（开头带/） - 动态拼接更可靠：
new URL("user/profile", window.location).href，自动按当前 URL 上下文解析 - 避免依赖
./前缀——某些构建工具或服务器会忽略它，行为不一致
前端 history 模式刷新 404：服务端没 fallback
Vue Router 或 React Router 开启 history 模式后，/about 这类 URL 刷新时，浏览器直接向服务器发请求。Nginx/Apache 若没配 fallback，就真返回 404。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- Nginx 必须在
location /块内加：try_files $uri $uri/ /index.html; - Apache 需启用
mod_rewrite，并在.htaccess中加重写规则，把非资源请求导向index.html - 本地开发别用
python -m http.server或npx serve -s测试 history 模式——它们不支持 fallback，换vite preview或serve -s的替代方案
后端路由拦截了前端跳转路径
前后端同域部署（如都走 https://api.example.com）时，前端跳到 /order/list，可能被后端 Express/Spring Boot 的同名 API 路由提前捕获，返回 JSON 或 404，前端路由根本没机会执行。
- 看 Network 中 404 请求的
Content-Type：若是application/json，说明后端已响应 - 检查后端日志，确认该路径是否真有 handler；避免“撞名”，比如给前端统一加前缀：
/app/order/list - 或者调整后端路由优先级，确保静态资源和前端入口路径（如
/app/*）不被 API 规则覆盖
最容易被忽略的是：你以为改对了 HTML 中的 href 或 src，但没意识到 <base href="/subapp/"> 正在全局影响所有相对路径解析——包括 JS 里的 fetch()、CSS 中的 url()，甚至 location.href。漏掉斜杠、多写斜杠、或跟 Vite 的 base、CRA 的 homepage 不一致，都会让跳转和资源加载同时失效。
