Nginx 自定义 404 页面

在不做任何修改的情况下，nginx 的默认 404 页面非常的丑：

但是我们可以自定义这个页面

解除对 404 重定向的限制

Nginx 默认不允许我们自定义 404 的错误页面和响应状态码

根据 HTTP 协议的设计原则，404 状态码表示客户端能够与服务器通信，但服务器找不到请求的资源。更改这个状态码可能会误导客户端，使其认为请求的资源是存在的，这违反了 HTTP 协议的语义

根据 Nginx 设计哲学，我们应该保持配置的透明度和清晰性，如果 Nginx 默认允许更改 404 响应页面，可能会导致用户或开发者混淆，特别是在调试和开发过程中，难以区分是资源真的不存在，还是服务器故意隐藏了这一信息

如果我们想要自定义这些配置，首先需要做的就是解除限制

方法也很简单，只需要在想要更改 404 错误页面的 URL 对应的 server 块的 location 中添加 proxy_intercept_errors on：

server {
    listen 80;
    server_name houyi2333.top;
    location / {
        root /xxx/static/homepage;
        index index.html; 
        proxy_intercept_errors on;
    }
}

这样就允许我们自定义错误页面，还允许我们修改响应状态码

自定义错误页面和状态码

server {
    listen 80;
    server_name yourdomain.com;  # 替换为你的域名
    location / {
        root /xxx/static/home;
        index index.html; 
        proxy_intercept_errors on;
    }
    error_page 404 = URL; # 重定向的 URL
}

error_page 指令允许用户自定义状态码和错误页面，上述配置当发生 404 错误时，会重定向到 URL

如果想要指定静态 HTML 页面：

server {
    listen 80;
    server_name yourdomain.com;  # 替换为你的域名
    location / {
        root /xxx/static/home;
        index index.html; 
        proxy_intercept_errors on;
    }
    error_page 404 =200 /custom_404.html; # 修改状态码为200，若不想修改删掉“=200”即可
    location = /custom_404.html {
        root /static/404; # 存放自定义html文件的位置
        index index.html # 如果发生404错误将会打开index.html
    }
}

不出意外就已经大功告成了

以此类推，还可以自定义 403 500 等页面

如果想要多个错误同时定向到一个页面，在 error_page 后面多写几个状态码就可以了

server {
    listen 80;
    server_name yourdomain.com;  # 替换为你的域名
    location / {
        root /xxx/static/home;
        index index.html; 
        proxy_intercept_errors on;
    }
    error_page 404 403 500 = URL; # 重定向的 URL
}