本文旨在解决在使用 Nginx 配置自定义 400 错误页面时，当用户通过 HTTP 访问 HTTPS 端口时，页面资源无法正确加载的问题。通过配置 Nginx 的 default_server，确保所有进入服务器的请求都能被正确处理，并提供一个统一的错误页面，从而提升用户体验。
当配置 Nginx 时，如果用户尝试通过 HTTP 访问配置了 SSL 的 HTTPS 端口，可能会遇到自定义错误页面显示不正确，资源（如图片、CSS 文件等）无法加载的问题。这是因为 Nginx 在选择处理请求的 server 块时，会根据端口、协议（HTTP 或 HTTPS）以及 server_name 进行匹配。如果找不到完全匹配的 server 块，可能会返回 400 错误。
问题分析
在提供的 Nginx 配置中，server 块只监听了 HTTPS 协议的 789 端口。当用户通过 HTTP 协议访问该端口时，Nginx 无法找到对应的 server 块来处理该请求，因此会返回一个 400 错误。虽然配置了自定义的 400 错误页面，但由于请求的协议是 HTTP，页面中的资源链接（如 src="../error_pages/assets/images/img12.png"）也是基于 HTTP 的，而此时 Nginx 并没有配置处理 HTTP 请求的 server 块，导致资源无法加载。
解决方案：配置 default_server
为了解决这个问题，建议配置一个 default_server 来处理所有未匹配到其他 server 块的请求。default_server 可以用来处理所有进入服务器的请求，并提供一个统一的错误页面，或者进行其他自定义操作。
以下是一个配置 default_server 的示例：
server {
listen 789; # 监听 HTTP 协议的 789 端口
server_name _; # 匹配所有域名
return 400 "Bad Request: Please use HTTPS"; # 返回 400 错误，并提示使用 HTTPS
# 或者，也可以重定向到 HTTPS
# return 301 https://$host$request_uri;
# 或者，返回自定义错误页面
# error_page 400 /400_page.html;
# location = /400_page.html {
# root /etc/nginx/error_pages;
# internal;
# }
}
配置详解：
- listen 789;: 监听 789 端口，但没有指定 ssl 参数，因此处理的是 HTTP 请求。
- server_name _;: _ 是一个通配符，表示匹配所有域名。这意味着，任何未匹配到其他 server 块的 HTTP 请求都会被这个 server 块处理。
- return 400 "Bad Request: Please use HTTPS";: 直接返回一个 400 错误，并提示用户使用 HTTPS 协议。也可以使用 return 301 https://$host$request_uri; 进行重定向，将 HTTP 请求自动跳转到 HTTPS。
- 自定义错误页面 (可选): 可以将 HTTP 请求导向自定义的 400 错误页面。这需要配置 error_page 指令和对应的 location 块，与原始配置中的 HTTPS server 块类似。
注意事项：
- 确保 default_server 的配置在其他 server 块之前，以便优先匹配。
- 根据实际需求，选择合适的处理方式：直接返回错误、重定向到 HTTPS 或返回自定义错误页面。
- 如果选择返回自定义错误页面，需要确保页面中的资源链接使用绝对路径或相对于 root 指令的相对路径，以避免资源加载问题。例如，可以将CSS和JS文件放到统一的目录下，并在HTML中引用绝对路径，如/assets/css/style.css。同时，需要确保对应的 location 块配置正确。
修改后的 Nginx 配置示例（包含 default_server 和绝对路径资源引用）：
upstream dashboardapp{
server test_server:80;
}
server {
listen 789;
server_name _;
return 301 https://$host$request_uri;
}
server {
listen 789 ssl;
server_name example.com;
ssl_certificate /etc/nginx/certs/host.crt;
ssl_certificate_key /etc/nginx/certs/host.key;
location / {
proxy_read_timeout 1800;
proxy_connect_timeout 1800;
proxy_send_timeout 1800;
send_timeout 1800;
proxy_hide_header x_destination;
proxy_pass http://dashboardapp;
}
location /error_pages {
root /etc/nginx/;
}
error_page 495 496 497 /400_page.html;
location = /400_page.html {
root /etc/nginx/error_pages;
internal;
}
error_page 404 /404_page.html;
location = /404_page.html {
root /etc/nginx/error_pages;
internal;
}
error_page 500 /500_page.html;
location = /500_page.html {
root /etc/nginx/error_pages;
internal;
}
error_page 502 /502_page.html;
location = /502_page.html {
root /etc/nginx/error_pages;
internal;
}
error_page 503 /503_page.html;
location = /503_page.html {
root /etc/nginx/error_pages;
internal;
}
location /assets {
root /etc/nginx/error_pages;
}
}
修改后的错误页面示例（使用绝对路径）：
<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Oops! Page not found</title><link rel="icon" href="/assets/images/cropped.png" type="image/x-icon"><link href="/assets/CSS/google.css" rel="stylesheet"><link href="/assets/CSS/googlefont2.css" rel="stylesheet"><style> /* 样式保持不变 */ </style><div id="notfound">
<div class="notfound">
@@##@@
<p></p>
<div class="notfound-404">
<h3>Oops! Page not found</h3>
<h1>
<span>4</span><span>0</span><span>0</span>
</h1>
</div>
<h3>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</h3>
<a id="myElementID" href="#" class="button" style="vertical-align:middle"><span>Home Page</span></a>
</div>
</div>
<script>
var a = document.getElementById('myElementID');
a.href = "http://"+window.location.hostname;
</script>
总结
通过配置 default_server，可以确保 Nginx 能够处理所有进入服务器的请求，即使协议不匹配也能提供友好的错误提示或重定向。同时，在自定义错误页面中，建议使用绝对路径或相对于 root 指令的相对路径来引用资源，以避免资源加载问题。 这将提升用户体验，并确保服务器的安全性。
