必须返回http 404状态码，否则影响seo和用户体验；apache用errordocument 404 /404.html（静态）或php中加http_response_code(404)，nginx配error_page 404 /404.html，next.js默认pages/404.js自动返回404，验证需查network中status是否为404 not found。
404 页面不是“随便写个提示就行”，它必须返回 HTTP 404 状态码，否则对 SEO 和用户体验都是负向影响。
如何确保服务器真正返回 404 状态码
很多开发者只在 HTML 里写“页面未找到”，但浏览器地址栏仍是 200 OK —— 这说明服务器根本没发 404 响应。关键不在前端渲染，而在服务端配置或动态脚本的显式声明。
- Apache：在
.htaccess中设置ErrorDocument 404 /404.html，且/404.html必须是静态文件（不经过 PHP/Node 渲染）；若用 PHP 动态生成，开头必须加http_response_code(404) - Nginx：在 server 块中配置
error_page 404 /404.html;，并确保该路径下文件存在且无重定向（比如不要写成/404.html?ref=xxx） - Next.js / Vercel：默认
pages/404.js会自动返回 404 状态；但若你在getServerSideProps中抛错或重定向，可能被降级为 200 - 验证方式：打开 DevTools → Network 标签，刷新一个明显不存在的路径（如
/nonexistent-abc123），看响应头中Status是否为404 Not Found
为什么不能用 JavaScript 跳转或单页路由模拟 404
客户端跳转（如 window.location.href = '/404'）或 React Router 的 <navigate to="/404"></navigate> 只改了 URL 和内容，HTTP 状态码仍是 200。搜索引擎爬虫不会把它当错误页处理，用户也无法通过浏览器“返回”回到上一页（因为历史记录里没有真实 404）。
- SPA 应用（如 Vue Router、React Router）必须配合服务端 fallback 配置：Nginx 的
try_files $uri $uri/ /index.html;是常见写法，但它会让所有 404 请求落到index.html，所以你得在 JS 里手动判断路径并调用history.replaceState(null, '', '/404')+ 渲染对应组件 —— 但这仍无法改变状态码，仅作视觉补救 - 真正合规的做法：服务端识别无效路径后，直接响应 404 + 自定义 HTML，不走前端路由
404 页面里哪些链接和行为容易踩坑
404 页面本质是“已失败”的上下文，任何可能引发二次请求或误导用户的交互都需谨慎。
- 避免在 404 页面中嵌入
<script src="https://cdn.example.com/analytics.js"></script>：第三方脚本加载失败或超时会拖慢页面可交互时间，而用户此时已经受挫 - 搜索框如果提交到
/search?q=xxx，请确保该接口本身有容错（比如返回空结果而非又一个 404） - 首页链接应使用绝对路径
@#@#@#@#@#@#@#@#@#@0，而非相对路径@#@#@#@#@#@#@#@#@#@1，这是唯一 100% 可靠的导航锚点 - 不要用
<button onclick="history.back()"></button>，而要用<a href="javascript:history.back()"></a>或更优解：CSS 隐藏按钮，JS 检测 referrer 后再显示并绑定事件
最常被忽略的一点：404 页面的 <title></title> 必须包含 “404” 字样，且放在 最前面。很多 CMS 默认复用首页 title，导致 Google 搜索结果中显示“我的博客 - 首页”，而不是“页面未找到 - 我的博客”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
