本文旨在解决 Nginx 在使用自定义 400 错误页面时，通过 HTTP 访问 HTTPS 端口导致资源（如图片、CSS）加载失败的问题。通过配置 `default_server` 或采用其他高级技巧，确保所有请求都能被正确处理，并提供一致的用户体验，即使在协议不匹配的情况下也能正常显示错误页面。
当你在 Nginx 中配置了自定义错误页面，并且一切在正常情况下运行良好时，可能会遇到一个棘手的问题：当用户尝试通过 HTTP 访问 HTTPS 端口时，自定义的 400 错误页面虽然能显示，但是页面中的资源（例如图片、CSS 样式）却无法加载。这通常是因为浏览器尝试从错误的协议（HTTP）下加载资源，导致请求失败。
问题分析
Nginx 基于端口、协议（HTTP 或 HTTPS）和 server_name 来匹配请求的服务器块。如果没有找到匹配的 default_server，Nginx 可能会返回 400 错误，或者选择第一个最匹配的服务器块。
当用户通过 HTTP 访问配置了 HTTPS 的端口时，由于协议不匹配，Nginx 找不到对应的服务器块来处理该请求。虽然错误页面被显示，但页面中的资源路径仍然是相对于 HTTP 的，因此无法正确加载。
解决方案
解决此问题的关键在于确保 Nginx 能够处理所有进入服务器的请求，即使协议不匹配。以下是几种可行的解决方案：
1. 配置 default_server
配置 default_server 是最推荐的方法。它可以处理所有与任何 server_name 都不匹配的请求。通过配置一个处理 HTTP 请求的 default_server，你可以确保所有通过 HTTP 访问 HTTPS 端口的请求都能被正确处理，并显示自定义的错误页面。
server {
listen 789 default_server; # 监听 HTTP 端口
server_name _; # 匹配所有 server_name
return 400; # 返回 400 错误
# 或者重定向到 HTTPS
# rewrite ^ https://$host$request_uri? permanent;
# 配置自定义 400 错误页面
error_page 400 /400_page.html;
location = /400_page.html {
root /etc/nginx/error_pages;
internal;
}
}在这个配置中，default_server 监听 789 端口上的所有 HTTP 请求。你可以选择直接返回 400 错误，或者将请求重定向到 HTTPS。同时，配置自定义的 400 错误页面，确保即使在协议错误的情况下也能显示友好的错误提示。
2. 处理同一端口上的 HTTP 和 HTTPS 请求（不推荐）
虽然不推荐，但 Nginx 理论上可以处理同一端口上的 HTTP 和 HTTPS 请求。这需要使用 if 指令来判断协议，并根据协议进行不同的处理。
server {
listen 789 ssl;
listen 789; # 同时监听 HTTP 和 HTTPS
server_name example.com;
ssl_certificate /etc/nginx/certs/host.crt;
ssl_certificate_key /etc/nginx/certs/host.key;
if ($scheme = http) {
return 400; # 返回 400 错误
# 或者重定向到 HTTPS
# rewrite ^ https://$host$request_uri? permanent;
}
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 400 /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;
}
}请注意，使用 if 指令在 Nginx 中通常被认为是不好的做法，因为它可能导致性能问题和不可预测的行为。因此，除非你有充分的理由，否则不建议使用这种方法。
3. 修改错误页面中的资源路径
另一种解决方案是修改错误页面中的资源路径，使用绝对路径或协议相对路径。
- 绝对路径： 使用完整的 URL 地址，例如 https://example.com/error_pages/assets/images/img12.png。
- 协议相对路径： 省略协议部分，例如 //example.com/error_pages/assets/images/img12.png。浏览器会自动根据当前页面的协议选择 HTTP 或 HTTPS。
这种方法可以确保资源能够从正确的协议下加载，但需要修改所有的错误页面，维护成本较高。
总结与注意事项
- 推荐使用 default_server 来处理所有未匹配的请求，确保 Nginx 能够处理所有进入服务器的流量。
- 避免在同一端口上同时处理 HTTP 和 HTTPS 请求，除非你有充分的理由。
- 如果选择修改错误页面中的资源路径，请确保所有资源都使用正确的路径。
- 定期检查 Nginx 的错误日志，及时发现和解决问题。
通过以上方法，你可以有效地解决 Nginx 自定义 400 错误页面资源加载失败的问题，为用户提供一致且友好的用户体验。
