Nginx 自定義404、500、502 頁面
阿新 • • 發佈：2019-01-24
line box width 技術分享 exce url screens onf utf
利用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 自定義404、500、502 頁面