Nginx自定义404页面的三种方法

在网站开发和运维中，确保用户获得良好的浏览体验至关重要。当用户访问一个不存在的页面时，服务器默认的404错误页面通常不够友好，而且缺乏个性化的信息。为了让您的网站更加专业，并提供更好的用户体验，自定义404页面变得尤为重要。本文将介绍几种使用Nginx配置自定义404页面的方法，帮助您轻松创建具有吸引力且包含有用信息的错误页面，从而改善网站的整体用户体验。

第一种：Nginx自带的错误页面

Nginx访问一个静态的html 页面，当这个页面没有的时候，Nginx抛出404，那么如何返回给客户端404呢？

看下面的配置，这种情况下不需要修改任何参数，就能实现这个功能。

server {
listen  80;
server_name www.test.com;
root /var/www/test;
index index.html index.htm;
location / {
}
# 定义错误页面码，如果出现相应的错误页面码，转发到那里。
error_page 404 403 500 502 503 504 /404.html;
# 承接上面的location。
location = /404.html {
# 放错误页面的目录路径。
root /usr/share/nginx/html;
}
}

第二种：反向代理定义错误页面

如果后台Tomcat处理报错抛出404，想把这个状态叫Nginx反馈给客户端或者重定向到某个连接，配置如下：

upstream www {
server 192.168.1.201:7777 weight=20 max_fails=2 fail_timeout=30s;
ip_hash;
}
server {
listen  80;
server_name www.test.com;
root /var/www/test;
index index.html index.htm;
location / {
if ($request_uri ~* ‘^/$') {
rewrite .* http://www.test.com/index.html redirect;
}
# 关键参数：这个变量开启后，我们才能自定义错误页面，当后端返回404，nginx拦截错误定义错误页面
proxy_intercept_errors on;
proxy_pass  http://www;
proxy_set_header HOST $host;
proxy_set_header X-Real-IP  $remote_addr;
proxy_set_header X-Forwarded-FOR $proxy_add_x_forwarded_for;
}
error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/html;
}
}

第三种：Nginx解析php代码实现自定义错误页面

如果后端是php解析的，需要加一个变量

在http段中加一个变量 fastcgi_intercept_errors on 就可以了。

指定一个错误页面：

error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/html;
}

指定一个url地址：

error_page 404  /404.html;

error_page 404 = http://www.test.com/error.html;

总结

总之，通过本文的介绍，我们了解了如何使用Nginx配置自定义404页面的几种方法。自定义404页面不仅能提升网站的专业形象，还能提供更好的用户体验。通过这些方法，我们可以创建既美观又实用的错误页面，从而改善网站的整体用户体验。希望本文的指导能够帮助您轻松地实现自定义404页面的目标。