要在 Nginx 的 server 块中用 error_page 实现美观且可用的 404/50x 错误页面，关键不是只写一行指令，而是让页面能正确加载、样式不丢失、状态码语义清晰，并避免常见陷阱。
要在 Nginx 的 server 块中用 error_page 实现美观且可用的 404/50x 错误页面，关键不是只写一行指令，而是让页面能正确加载、样式不丢失、状态码语义清晰，并避免常见陷阱。
准备静态错误页文件
把 HTML 文件放在网站根目录下（如 /var/www/html/），推荐命名规范：
-
404.html：专用于资源未找到，内容可含返回首页链接、搜索框或友好的插画 -
50x.html：统一承接 500/502/503/504，适合写“服务暂时不可用”“正在维护中”等提示
为避免 CSS/JS/图片 404，建议：
- 内联关键 CSS（不用外链
<link>） - 图片转为 base64 编码嵌入
<img src="data:image/png;base64,..." alt="如何通过 error_page 在 server 块自定义美观的 404/50x 错误页面" > - 文件权限设为
644，确保 Nginx 工作进程可读
在 server 块中配置 error_page 指令
在站点的 server { } 配置内添加：
error_page 404 /404.html; error_page 500 502 503 504 /50x.html;
注意两点：
- 路径以
/开头，是 URI 路径，不是文件系统绝对路径 - 不要写成
error_page 404 = /404.html—— 等号会强制改状态码为 200，破坏 SEO 和调试意义；如需保留原始状态码，就别加=
添加 location 块确保错误页可访问
必须显式声明错误页自身的访问规则，否则可能再次触发 404：
location = /404.html {
internal; # 仅限内部重定向访问，禁止用户直接请求该 URL
}
<p>location = /50x.html {
internal;
}如果希望支持直接访问（比如用于测试），可去掉 internal，并确认该路径不被其他 location 规则覆盖（例如避免被 location / { ... } 中的 try_files 干扰）。
确保 MIME 类型和响应头正确
若页面打开后是纯文本或下载而不是渲染 HTML，大概率是 Content-Type 错了。检查配置中是否已启用：
-
include mime.types;（通常在http块里，默认开启） - 或在对应
location块中手动指定：types { text/html html; }
还可加一行提升体验：
location = /404.html {
internal;
add_header Cache-Control "no-store, no-cache, must-revalidate";
}验证与生效
改完配置后执行：
-
nginx -t检查语法 -
nginx -s reload重载配置 - 用
curl -I https://yoursite.com/nonexistent-path查看返回状态码是否仍为 404，Content-Type是否为text/html - 停掉后端服务再访问接口，验证 502 是否跳转到
50x.html
