404重定向本质是返回真实404状态码而非跳转;Apache需用ErrorDocument 404 /404.html(路径以/开头),禁用绝对URL和相对路径,文件≥512字节,并用curl -I验证响应头为HTTP/1.1 404 Not Found且内容正确。

404 重定向不是“把用户跳走”,而是让服务器在返回错误页的同时,**真实发出 404 Not Found 状态码**——这点错了,SEO 和浏览器行为全崩。
Apache 的 ErrorDocument 必须写对路径
错误现象:页面显示正常,但 curl -I /nonexistent 返回 HTTP/1.1 200 OK 或 302 Found。
-
ErrorDocument 404 /404.html—— 正确,必须以/开头,表示网站根目录下的文件 -
ErrorDocument 404 404.html—— 错误,Apache 当作相对路径,常导致 500 或空白响应 -
ErrorDocument 404 https://yoursite.com/404.html—— 错误,触发 302 跳转,状态码变成 200,被搜索引擎判为软 404 - 文件
404.html必须 ≥512 字节(加点文字或注释即可),否则部分浏览器会忽略并显示默认页
Nginx 的 error_page 需配合 location 和 internal
错误现象:访问不存在路径后,页面空白、报 500,或直接暴露 /404.html 可被外部直访。
- 只写
error_page 404 /404.html;不够,Nginx 不知道怎么响应这个 URI - 必须补上:
location = /404.html { internal; root /usr/share/nginx/html; } -
internal是关键:禁止用户手动访问/404.html,防止路径泄露和 SEO 污染 - 若用
alias,末尾必须带/:alias /var/www/error/;→ 文件路径是/var/www/error/404.html;写成alias /var/www/error就会错
静态托管平台(GitHub Pages / Netlify)不认 error_page 或 .htaccess
错误现象:本地测试正常,部署后深层路由刷新仍 404,或返回平台默认错误页。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- GitHub Pages:只需放一个
404.html在仓库根目录,**无需任何配置**;它会自动接管所有 404 请求并返回该文件 +404状态码 - Netlify:不能靠
_redirects做真 404,得用netlify.toml:[[redirects]] from = "/*" to = "/404.html" status = 404
- 注意:GitHub Pages 的
404.html对 SPA 有特殊用途——它可内嵌 JS 实现 URL 重写(如history.replaceState),但前提是状态码仍是 404,不能改成 200
SPA 场景下别混淆“前端路由 fallback”和“真 404”
错误现象:刷新 /user/123 显示白屏或首页,Network 面板里状态码是 200,但地址栏没变——这不是 404 处理,是 fallback 配置。
-
index.html本身不处理 404,它只是个载体;真 404 由服务器判定 - Nginx 的
try_files $uri $uri/ /index.html;是让所有未命中路径都返回index.html+200,这是 SPA 正常行为,**不是 404 配置** - 若你同时需要 SPA fallback 和真实 404(比如 API 接口挂了要返回 404),就得加条件判断:排除
/api/、/assets/等前缀,再 fallback - CodeIgniter 等框架的
$route['404_override']是服务端路由兜底,它返回的是200,不是标准 404;如需 SEO 友好,应在该方法中显式调用http_response_code(404)
最容易被忽略的一点:无论用哪种方式,最终验证只看两件事——curl -I 返回的第一行是不是 HTTP/1.1 404 Not Found,以及响应体是不是你的 404.html 内容。其他全是障眼法。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










