本文旨在解决在使用 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;
    # }
}

配置详解：

1. listen 789;: 监听 789 端口，但没有指定 ssl 参数，因此处理的是 HTTP 请求。
2. server_name _;: _ 是一个通配符，表示匹配所有域名。这意味着，任何未匹配到其他 server 块的 HTTP 请求都会被这个 server 块处理。
3. return 400 "Bad Request: Please use HTTPS";: 直接返回一个 400 错误，并提示用户使用 HTTPS 协议。也可以使用 return 301 https://$host$request_uri; 进行重定向，将 HTTP 请求自动跳转到 HTTPS。
4. 自定义错误页面 (可选): 可以将 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;
    }
}

修改后的错误页面示例（使用绝对路径）：

    
    
    
    
    
    
    
    



    
        
            @@##@@
            

            
                
Oops! Page not found
                
400
            
            
The page you are looking for might have been removed had its name changed or is temporarily unavailable.
            Home Page
        
    

总结

通过配置 default_server，可以确保 Nginx 能够处理所有进入服务器的请求，即使协议不匹配也能提供友好的错误提示或重定向。同时，在自定义错误页面中，建议使用绝对路径或相对于 root 指令的相对路径来引用资源，以避免资源加载问题。 这将提升用户体验，并确保服务器的安全性。