因为业务业务需求，需要做一个错误的页面，避免出现错误信息或者相关业务信息泄露，所以在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><svgclass="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><pathid="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>
