404错误可预防而非完全避免，关键在于跳转前验证路径、使用相对路径、全局更新引用、DevTools校验资源、onerror兜底、确保服务器返回真实404状态码及动态页面显式设置HTTP状态码。
404错误无法完全避免，但绝大多数可预防——关键不是“不报错”，而是让错误不发生、不暴露、不传播。
链接跳转前先验证路径是否存在
静态网站中，<a href="blog/post.html"> 指向一个已删除或重命名的文件，就是最直接的404来源。这类错误在开发阶段就能堵住。
- 所有内部链接必须用相对路径，且从当前 HTML 文件位置出发计算：同级写
href="about.html"，上一级写href="../index.html"，绝不用href="/blog/post.html"（除非你明确控制了根路径部署） - 改名或移动文件后，立刻全局搜索旧路径（如
"post.html"），批量更新引用处 - 用本地服务器（如 VS Code Live Server、Python
python -m http.server）预览时，打开浏览器 DevTools → Network 标签，刷新页面，看是否有红色 404 请求——这是最快速的路径校验方式
图片和资源加载失败时主动兜底
<img src="icon.svg"> 加载失败，浏览器默认不报错，只留空白方块；用户看不见问题，开发者也容易忽略。
- 给所有关键图片加
onerror回调：<img src="logo.png" onerror="this.src='fallback.png'"> - CSS 中的
background-image无法用 JS 监听失败，所以必须确保路径 100% 正确：在浏览器地址栏粘贴完整 URL（如http://localhost:5500/assets/bg.jpg），能打开才算有效 - 字体、SVG Sprite、JS/CSS 引入路径同样适用该验证法；任何
src或href值都应能独立访问
服务器配置必须返回真实 404 状态码
用户看到“页面未找到”，但服务器偷偷返回 200 OK，这就是软404——对 SEO 杀伤力极大，且无法被爬虫识别为错误页。
立即学习“前端免费学习笔记（深入）”；
- 用
curl -I https://yoursite.com/xxx查响应头，必须含HTTP/1.1 404 Not Found - Nginx 配置需同时满足：
error_page 404 /404.html;+location = /404.html { internal; }；漏掉internal，访问/404.html本身会返回 200 - GitHub Pages、Vercel 等静态托管平台不支持自定义状态码，
404.html只是前端路由兜底，实际响应仍是 200——这种场景下，404 错误本质不可修复，只能靠客户端 JS 拦截history并提示，但对搜索引擎无效
动态页面里别忘了显式设状态码
PHP/Node.js/Python 渲染 404 模板时，最容易犯的错是只输出 HTML，却没改 HTTP 状态码，默认仍是 200。
- PHP：
http_response_code(404);必须在任何echo、include或输出前调用 - Express：
res.status(404).render('404');或res.sendStatus(404);，不能只写res.render('404'); - Flask：
return render_template('404.html'), 404，括号外的404是状态码，缺了就变成 200
真正难防的 404，往往藏在第三方脚本加载、CDN 缓存失效、或跨域资源引用里；这些地方没法靠肉眼检查，得靠 Network 面板持续盯住 Status 列。一旦发现 404，优先确认是路径写错、文件没上传、还是权限/配置拦住了请求——三者处理方式完全不同。
