Nginx 自定义404500502 页面

Posted 2021-02-05 宅小涛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Nginx 自定义404500502 页面相关的知识，希望对你有一定的参考价值。

利用nginx的反向代理来实现服务器404 和500 等状态码的自定义页面

1.nginx配置文件 nginx.conf 配置开启代理错误拦截和配置页面下划线部分

http {

        ......

    proxy_intercept_errors on;

    fastcgi_intercept_errors on;
    
    server {

         ......


    error_page  404   /notfind.html;
    
    error_page   500 /error.html;
        
    error_page   502 503 504 /error502.html;
    }
}

2.编写自定义页面，将页面放置在nginx路径下的html 文件夹下页面中用到的图片什么的都放置与此文件夹下

3.重启nginx 配置生效 OK

404页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="icon" type="image/x-icon" href="http://zhaixt.info/icon.ico" />
 
<title>404-对不起！您访问的页面不存在</title>
 
<style type="text/css">
 
.head404{ width:580px; height:234px; margin:50px auto 0 auto; background:url(http://zhaixt.info/head404.png) no-repeat; }
 
.txtbg404{ width:499px; height:169px; margin:10px auto 0 auto; background:url(http://zhaixt.info/txtbg404.png) no-repeat;}
 
.txtbg404 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}
 
.txtbg404 .txtbox p {margin:5px 0; line-height:18px;}
 
.txtbg404 .txtbox .paddingbox { padding-top:15px;}
 
.txtbg404 .txtbox p a { color:#eee; text-decoration:none;}
 
.txtbg404 .txtbox p a:hover { color:#FC9D1D; text-decoration:underline;}
 
</style>
 
</head>
 
 
 
<body bgcolor="#494949">
 
       <div class="head404"></div>
 
       <div class="txtbg404">
 
  <div class="txtbox">
 
      <p>对不起，您请求的页面不存在、或已被删除、或暂时不可用</p>
 
      <p class="paddingbox">请点击以下链接继续浏览网页</p>
 
      <p>》<a style="cursor:pointer" onclick="history.back()">返回上一页面</a></p>
      
      <p>》<a href="http://zhaixt.info/screenShot/index"> 文字识别 </a></p>
 
      <p>》<a href="http://zhaixt.info/excelchange/index"> 图表转换 </a></p>
 
    </div>
 
  </div>
 
</body>
 
</html>

500页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>We\'re sorry, but something went wrong (500)</title>
  <meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="icon" type="image/x-icon" href="http://zhaixt.info/icon.ico" />
  <style type="text/css">
 
    .head500{ width:580px; height:234px; margin:50px auto 0 auto; background:url(http://zhaixt.info/head500.png) no-repeat; }
     
    .txtbg500{ width:499px; height:169px; margin:10px auto 0 auto; background:url(http://zhaixt.info/txtbg404.png) no-repeat;}
     
    .txtbg500 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}
     
    .txtbg500 .txtbox p {margin:5px 0; line-height:18px;}
     
    .txtbg500 .txtbox .paddingbox { padding-top:15px;}
     
    .txtbg500 .txtbox p a { color:#eee; text-decoration:none;}
     
    .txtbg500 .txtbox p a:hover { color:#FC9D1D; text-decoration:underline;}
 
</style>
</head>
 
<body bgcolor="#494949">
 
       <div class="head500"></div>
 
       <div class="txtbg500">
 
  <div class="txtbox">
 
      <p class="paddingbox">请点击以下链接继续浏览网页</p>
 
      <p>》<a style="cursor:pointer" onclick="history.back()">返回上一页面</a></p>
      
      <p>》<a href="http://zhaixt.info/screenShot/index"> 文字识别 </a></p>
 
      <p>》<a href="http://zhaixt.info/excelchange/index"> 图表转换 </a></p>
 
    </div>
 
  </div>
 
</body>
</html>

502页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>We\'re sorry, but something went wrong (502)</title>
  <meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="icon" type="image/x-icon" href="http://zhaixt.info/icon.ico" />
  <style type="text/css">
 
    .head500{ width:580px; height:234px; margin:50px auto 0 auto; background:url(http://zhaixt.info/502.png) no-repeat; }
     
    .txtbg500{ width:499px; height:169px; margin:10px auto 0 auto; background:url(http://zhaixt.info/txtbg404.png) no-repeat;}
     
    .txtbg500 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}
     
    .txtbg500 .txtbox p {margin:5px 0; line-height:18px;}
     
    .txtbg500 .txtbox .paddingbox { padding-top:15px;}
     
    .txtbg500 .txtbox h1,h2{ color:#FC9D1D;}
 
</style>
</head>
 
<body bgcolor="#494949">
 
       <div class="head500"></div>
 
       <div class="txtbg500">
 
  <div class="txtbox">
 
    <h1> SORRY </h1>
    
    <h2>服务升级中...如等待时间过长，请联系宅小涛</h2>
 
    </div>
 
  </div>
 
</body>
</html>

欢迎大家参考！

以上是关于Nginx 自定义404500502 页面的主要内容，如果未能解决你的问题，请参考以下文章

使用 nginx 返回自定义 403 错误页面

VSCode自定义代码片段——CSS选择器

HTML代码片段

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段(vue主模板)