网页错误页提示码汇总及使用示例

骑猪看日落 2022-07-25 15:37 106阅读 0赞

网页错误页提示码汇总及使用示例

Web项目中总会遇到对错误页面的设计，好的错误页面处理，会让软件体验更佳，可以帮助运维人员了解基本错误信息，更好的维护软件。当然从底层避免错误是更好的软件开发方式，但我们很难避免软件一些非常隐性的Bug。

以下对网页错误页提示码进行汇总，并对最常见的404错误给出示例页面Demo。

**2xx- 成功：这类状态提示码代表服务器成功地接受了客户端请求。**

200：确定，客户端请求已成功。
               201：已创建。
               202：已接受。
               203：非权威性信息。
               204：无内容。
               205：重置内容。
               206：部分内容。

**3xx- 重定向：客户端浏览器必须采取更多操作来实现请求。**

301：对象已永久移走，即永久重定向。 
               302：对象已临时移动。 
               304：未修改。 
               307：临时重定向。

**4xx-客户端错误：发生错误，客户端请求不存在的页面，客户端未提供有效的身份验证信息。**

401：访问被拒绝。
                   401.1：登录失败。
                   401.2：服务器配置导致登录失败。
                   401.3：由于ACL对资源的限制而未获得授权。
                   401.4：筛选器授权失败。
                   401.5：ISAPI/CGI应用程序授权失败。
                   401.7：访问被Web服务器上的URL授权策略拒绝。这个错误代码为IIS6.0所专用。
               403：禁止访问：IIS定义了许多不同的403错误，它们指明更为具体的错误原因：
                   403.1：执行访问被禁止。
                   403.2：读访问被禁止。
                   403.3：写访问被禁止。
                   403.4：要求SSL。
                   403.5：要求SSL128。
                   403.6：IP地址被拒绝。
                   403.7：要求客户端证书。
                   403.8：站点访问被拒绝。
                   403.9：用户数过多。
                   403.10：配置无效。
                   403.11：密码更改。
                   403.12：拒绝访问映射表。
                   403.13：客户端证书被吊销。
                   403.14：拒绝目录列表。
                   403.15：超出客户端访问许可。
                   403.16：客户端证书不受信任或无效。
                   403.17：客户端证书已过期或尚未生效。
                   403.18：在当前的应用程序池中不能执行所请求的URL。这个错误代码为IIS6.0所专用。
                   403.19：不能为这个应用程序池中的客户端执行CGI。这个错误代码为IIS6.0所专用。
                   403.20：Passport登录失败。这个错误代码为IIS6.0所专用。
              404：未找到。
                   404.0：没有找到文件或目录。
                   404.1：无法在所请求的端口上访问Web站点。
                   404.2：Web服务扩展锁定策略阻止本请求。
                   404.3：MIME映射策略阻止本请求。
              405：用来访问本页面的HTTP谓词不被允许（方法不被允许）。
              406：客户端浏览器不接受所请求页面的MIME类型。
              407：要求进行代理身份验证。
              412：前提条件失败。
              413：请求实体太大。
              414：请求URI太长。
              415：不支持的媒体类型。
              416：所请求的范围无法满足。
              417：执行失败。
              423：锁定的错误。

**5xx-服务器错误：服务器由于遇到错误而不能完成该请求。**

500：内部服务器错误。
                  500.12：应用程序正忙于在Web服务器上重新启动。
                  500.13：Web服务器太忙。
                  500.15：不允许直接请求Global.asa。
                  500.16：UNC授权凭据不正确。这个错误代码为IIS6.0所专用。
                  500.18：URL授权存储不能打开。这个错误代码为IIS6.0所专用。
                  500.100：内部ASP错误。
              501：页眉值指定了未实现的配置。
              502：Web服务器用作网关或代理服务器时收到了无效响应。
                  502.1：CGI应用程序超时。
                  502.2：CGI应用程序出错。
              503：服务不可用。这个错误代码为IIS6.0所专用。
              504：网关超时。
              505：HTTP版本不受支持。

以下以404错误提示码为例，设计的错误页面示例Demo:

**示例1：**error1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%
      String path = request.getContextPath();
      // 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量    
      String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
    	   + path + "/";
      // 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。    
      pageContext.setAttribute("basePath", basePath);
    %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gbk" />
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-1.8.2.min.js"></script>
    <title>抱歉，您访问的页面正在整修中</title>
    
    
    
    <script type="text/javascript">
      function returnFirst() {  
    	  window.location = "https://www.baidu.com";
      }
      
      $(function(){
    	  var timeDom = $("#time");
    	  function timeEve(){
    	  	if(timeDom.length==0) return false;
    	  	var num = parseInt(timeDom.html());
    	  	function countDown(){
    	  		if(num<=1){
    	  			window.location.href="https://www.baidu.com/";
    	  			return false;	
    	  		}
    	  		window.setTimeout(function(){
    	  			num--;
    	  			timeDom.html(num);
    	  			countDown();
    	  		},1000);
    	  	};
    	  	countDown();
    	  }
    	  timeEve();
    	});
    </script>
    
    <style>
    body {
    	MARGIN: 0px auto; WIDTH: 950px; margin:0 auto; FONT: 11px "Lucida Grande",Arial,Verdana,sans-serif; BACKGROUND: url(<%=basePath%>static/image/error/body_bg.jpg) #d4d4d4 repeat-x; padding-top:80px;
    }
    div.error404_main {
    	POSITION: relative; MARGIN: 31px 21px 0px; WIDTH: 950px; BACKGROUND: url(<%=basePath%>static/image/error/error404.jpg) no-repeat; HEIGHT: 500px
    }
    span.main_txt {
    	POSITION: absolute; TEXT-ALIGN: center; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 200px; PADDING-RIGHT: 0px; DISPLAY: block; HEIGHT: 200px; COLOR: #1d1d1d; TOP: 240px; PADDING-TOP: 2px; LEFT: 750px
    }
    span.main_txt span {
    	MARGIN: 2px 2px 8px; DISPLAY: block
    }
    span.main_txt a {
    	COLOR: #1d1d1d
    }
    div.error404_guide {
    	POSITION: relative; BACKGROUND-COLOR: #b4b4b4; MARGIN: 0px 21px; WIDTH: 950px; HEIGHT: 100px
    }
    </style>
    
    </head>
    
    <body class="page">
    <div class="error404_main">
       <span class="main_txt">
          <div>
            <div id="time">10</div> <div>秒后为您跳转到系统 <a href="javascript:void(0);" οnclick="returnFirst()" >首页</a></div>  
          </div>
          <span><a href="javascript:history.go(-1);">◂返回上一页</a></span> 
       </span>
    </div>
    </body>
    
    </html>

示例1效果截图：

![Center][]

**示例2：error2.jsp**

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%
       String path = request.getContextPath();
       // 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量    
       String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
    		+ path + "/";
       // 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。    
       pageContext.setAttribute("basePath", basePath);
    %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gbk" />
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-1.8.2.min.js"></script>
    <title>抱歉，您访问的页面正在整修中</title>
    <style type="text/css">
    body{margin:0;padding:0;font:14px/1.6 Arial,Sans-serif;}
    a:link,a:visited{color:#007ab7;text-decoration:none;}
    h1{
    	position:relative;
    	z-index:2;
    	width:540px;
    	height:0;
    	margin:110px auto 15px;
    	padding:230px 0 0;
    	overflow:hidden;
    	xxxxborder:1px solid;
    	background-image: url(static/image/error/Main.jpg);
    	background-repeat: no-repeat;
    }
    h2{
    	position:absolute;
    	top:17px;
    	left:187px;
    	margin:0;
    	font-size:0;
    	text-indent:-999px;
    	-moz-user-select:none;
    	-webkit-user-select:none;
    	user-select:none;
    	cursor:default;
    	width: 534px;
    }
    h2 em{display:block;font:italic bold 200px/120px "Times New Roman",Times,Serif;text-indent:0;letter-spacing:-5px;color:rgba(216,226,244,0.3);}
    .link a{margin-right:1em;}
    .link,.texts{width:540px;margin:0 auto 15px;color:#505050;}
    .texts{line-height:2;}
    .texts dd{margin:0;padding:0 0 0 15px;}
    .texts ul{margin:0;padding:0;}
    .portal{color:#505050;text-align:center;white-space:nowrap;word-spacing:0.45em;}
    .portal a:link,.portal a:visited{color:#505050;word-spacing:0;}
    .portal a:hover,.portal a:active{color:#007ab7;}
    .portal span{display:inline-block;height:38px;line-height:35px;}
    .portal span span{padding:0 0 0 20px;}
    .portal span span span{padding:0 20px 0 0;background-position:100% -80px;}
    .STYLE1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 65px;
    }
    </style>
    
    
    <script type="text/javascript">
      function returnFirst() {  
    	  window.location = "<%=basePath%>reloadHome.do";
      }
      
      $(function(){
    	  var timeDom = $("#time");
    	  function timeEve(){
    	  	if(timeDom.length==0) return false;
    	  	var num = parseInt(timeDom.html());
    	  	function countDown(){
    	  		if(num<=1){
    	  			window.location.href="<%=basePath%>reloadHome.do";
    	  			return false;	
    	  		}
    	  		window.setTimeout(function(){
    	  			num--;
    	  			timeDom.html(num);
    	  			countDown();
    	  		},1000);
    	  	};
    	  	countDown();
    	  }
    	  timeEve();
    	});
    </script>
    
    </head>
    <body>
        <h1></h1>
        <p class="link">
            <a href="javascript:void(0);" οnclick="returnFirst()" >◂返回首页</a>
            <a href="javascript:history.go(-1);">◂返回上一页</a>
        </p>
        <p>
          <dl class="texts" >
            <dt>抱歉，您访问的页面正在整修中...</dt>
            <dt><span id="time" > 10 </span>秒后为您跳转到系统首页 </dt>
          </dl>
    	</p>
    </body>
    </html>

示例2效果截图：

![Center 1][]

[Center]: /images/20220724/20e67531013444f08d32b4800a5ffcde.png
[Center 1]: /images/20220724/443a2b8882564d079e40372bba1af65b.png