html 通用错误页面

慢吞云雾缓吐愁 · 2024-12-28 06:42:17

因为业务业务需求，必要做一个错误的页面，制止出现错误信息或者相干业务信息泄露，所以在Nginx配置一个通用错误页面。

完成后页面访问路径：
/error.htmlstatus=500&uri=/user&time_local=2024年7月29日10:16:04&remote_addr=127.0.0.1&args=test=1

Nginx获取相干错误信息的方式：

location / {
#root D:/Product/xxx;
proxy_pass http://192.168.110.28:8080;
#主要是拦截tomcat的错误，不然获取不到Java抛出的异常
proxy_intercept_errors on; # 开启错误拦截
}
error_page 404 405 500 502 503 504 /50x.html;
location /50x.html {
internal; # 确保该页面只能通过内部重定向访问
root html;
# 传递状态码和其他信息到自定义页面
rewrite ^ /error.html?status=$status&uri=$uri&remote_addr=$remote_addr&http_user_agent=$http_user_agent&time_local=$time_local permanent;
}
# 目标前缀
location /error.html {
}

复制代码

以下是一些常用的 Nginx 变量及其用途，你可以在错误页面或日志中利用这些变量：

请求相干信息：
$request: 完整的原始请求行。
$uri: 当前请求的 URI（不包罗请求参数）。
$args: 请求参数。
$request_body: 请求体内容。
$request_method: 请求方法（例如 GET、POST 等）。
$remote_addr: 客户端 IP 所在。
$remote_port: 客户端端口。
$http_user_agent: 客户端的 User-Agent 头信息。
$http_referer: 引用页面（Referer 头信息）。
服务器相干信息：
$server_name: 服务器名称。
$server_addr: 服务器所在。
$server_port: 服务器端口。
$hostname: 服务器主机名。
毗连和会话信息：
$connection: 毗连序列号。
$connection_requests: 当前毗连上的请求数量。
$cookie_name: 指定的 cookie 值（例如 $cookie_SESSIONID 获取名为 SESSIONID 的 cookie 值）。
时间相干信息：
$time_iso8601: 当前时间，ISO 8601 格式。
$time_local: 当前时间，本地时间格式。

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>错误页面</title>
<style>
body {
margin: 0;
}
h1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
letter-spacing: 2px;
font-size: 48px;
}
p {
font-family: 'Lato', sans-serif;
letter-spacing: 1px;
font-size: 14px;
color: #333333;
}
.header {
position: relative;
text-align: center;
background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
color: white;
}
.logo {
width: 50px;
fill: white;
padding-right: 15px;
display: inline-block;
vertical-align: middle;
}
.inner-header {
height: 65vh;
width: 100%;
margin: 0;
padding: 0;
}
.flex {
/*Flexbox for containers*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.waves {
position: relative;
width: 100%;
height: 15vh;
margin-bottom: -7px; /*Fix for safari gap*/
min-height: 100px;
max-height: 150px;
}
.content .button {
display: inline-block;
padding: 0 20px;
line-height: 40px;
font-size: 14px;
color: #fff;
background-color: #5dadf5;
text-decoration: none;
}
.content .button:hover {
opacity: .9;
}
/* Animation */
.parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height: 40px;
min-height: 40px;
}
.content {
height: 30vh;
}
h1 {
font-size: 24px;
}
}
.card {
text-align: left;
letter-spacing: 1px;
color: #666666;
width: 300px;
padding: 20px 100px;
min-height: 250px;
background: rgba(255, 255, 255, .4);
border-radius: 5px;
}
.card .card-title {
color: #ff2929;
padding: 10px 0;
font-size: 24px;
}
.card .card-content{
word-break: break-all;
}
</style>
</head>
<body>
<div class="header">
<div class="inner-header flex">
<div class="card">
<div class="card-title"><b class="status"></b> 页面响应错误！</div>
<div class="card-content">
<p>页面状态：<span class="status"></span></p>
<p>访问地址：<span class="uri"></span></p>
<p>请求参数：<span class="args"></span></p>
<p>访问时间：<span class="time_local"></span></p>
<p>客户端 IP：<span class="remote_addr"></span></p>
</div>
</div>
</div>
<svg
class="waves"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none"
shape-rendering="auto"
>
<defs>
<path
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"/>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"/>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"/>
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"/>
</g>
</svg>
</div>
<div class="content flex">
<p>
<a class="button" href="/">返回主页</a>
</p>
</div>
</body>
<script type="text/javascript">
var urlParams = new URLSearchParams(window.location.search);
var statusCode = urlParams.get('status');
document.querySelectorAll('.status').forEach(function (e) {
e.textContent = statusCode;
})
document.querySelector('.uri').textContent = urlParams.get('uri');
document.querySelector('.args').textContent = urlParams.get('args');
document.querySelector('.time_local').textContent = urlParams.get('time_local');
document.querySelector('.remote_addr').textContent = urlParams.get('remote_addr');
</script>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

html 通用错误页面

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云