解决 Nginx 自定义 400 错误页面 SSL 资源加载问题

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



    
        
            @@##@@
            

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 指令的相对路径来引用资源,以避免资源加载问题。 这将提升用户体验,并确保服务器的安全性。