本文旨在解决在使用 Nginx 配置自定义 400 错误页面时，当用户通过 HTTP 访问 HTTPS 端口导致资源加载失败的问题。我们将分析问题原因，并提供配置 Nginx 以正确处理 HTTP 和 HTTPS 请求的解决方案，确保自定义错误页面能够正常显示。通过配置 `default_server`，我们可以有效地管理所有进入服务器的请求，并提供一致的用户体验。
在使用 Nginx 配置 SSL 时，如果用户尝试通过 HTTP 访问 HTTPS 端口，可能会遇到自定义 400 错误页面显示，但其关联的资源（如图片、CSS 文件）无法加载的问题。这通常是因为 Nginx 无法找到与 HTTP 请求匹配的服务器块配置。
问题分析
Nginx 根据端口、协议（HTTP 或 HTTPS）和 server_name 来匹配请求的服务器块。当用户在 HTTPS 端口上发起 HTTP 请求时，由于协议不匹配，Nginx 可能无法找到合适的服务器块来处理该请求，从而返回 400 错误。
问题在于，错误页面中的资源路径通常是相对路径，例如：
@@##@@
当浏览器尝试加载这些资源时，它会基于错误的协议（HTTP）和端口（HTTPS 端口）构建 URL，导致资源请求失败。例如，如果用户访问 http://192.168.1.1:789，浏览器可能会尝试加载 http://192.168.1.1:789/error_pages/assets/images/img12.png，但由于 Nginx 没有配置处理该 HTTP 请求的服务器块，资源将无法加载。
解决方案：配置 default_server
解决此问题的最佳方法是配置一个 default_server 来处理所有未匹配的 HTTP 和 HTTPS 请求。default_server 确保 Nginx 始终有一个服务器块来处理任何传入的请求，即使它与任何显式配置的服务器块都不匹配。
以下是如何配置 default_server 的步骤：
- 创建 HTTP 服务器块： 创建一个新的服务器块来监听 HTTP 端口（通常是 80）。将此服务器块配置为 default_server。
- 处理 HTTP 请求： 在 default_server 块中，您可以选择将所有 HTTP 请求重定向到 HTTPS，或者提供一个自定义的错误页面。
以下是一个示例 Nginx 配置：
server {
listen 80 default_server;
server_name _; # 匹配所有域名
# 将所有 HTTP 请求重定向到 HTTPS
return 301 https://$host$request_uri;
# 或者，提供一个自定义错误页面
# root /var/www/error_pages;
# index index.html;
}
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;
}
}在这个例子中，第一个 server 块监听 80 端口，并被指定为 default_server。它使用 return 301 指令将所有 HTTP 请求重定向到相应的 HTTPS 地址。您可以根据需要修改此配置，例如，提供一个自定义的 HTTP 错误页面。
注意事项：
- 确保 default_server 块位于 Nginx 配置文件的顶部，以便它能够首先被匹配。
- server_name _ 匹配所有域名，因此可以处理任何未配置的域名请求。
- 如果选择重定向到 HTTPS，请确保您的 HTTPS 配置正确，并且 SSL 证书有效。
其他解决方案
虽然配置 default_server 是推荐的方法，但还有其他一些可能的解决方案：
- 修改错误页面中的资源路径： 将错误页面中的资源路径更改为绝对路径，例如 https://example.com/error_pages/assets/images/img12.png。这可以确保浏览器始终使用正确的协议和域名来加载资源。但是，这种方法需要在多个地方进行更改，并且如果域名发生更改，则需要更新所有路径。
- 配置 Nginx 处理 HTTP 请求： 您可以配置 Nginx 来处理 HTTPS 端口上的 HTTP 请求。但是，这可能会导致安全问题，因为您需要处理非加密的流量。不建议使用此方法。
总结
通过配置 default_server，您可以有效地解决 Nginx 自定义 400 错误页面资源加载失败的问题。这种方法确保 Nginx 始终能够处理任何传入的请求，并提供一致的用户体验。同时，它也允许您更好地控制进入服务器的流量，并实施安全策略。记住，在修改 Nginx 配置文件后，始终要重新加载配置以使更改生效：
sudo nginx -t # 测试配置 sudo nginx -s reload # 重新加载配置
希望本教程能帮助您解决 Nginx 配置中的问题！
