解决 Nginx 自定义 400 错误页面 SSL 资源加载问题-html教程-PHP中文网

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

碧海醫心

发布： 2025-11-21 11:56:02

原创

521人浏览过

解决 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 的示例：

360智图

AI驱动的图片版权查询平台

143

查看详情

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;
    }
}

登录后复制

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

<html lang="en">

<head>
    <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>
</head>

<body background="/assets/images/background.jpg">
    <div id="notfound">
        <div class="notfound">
            <img src="/assets/images/img12.png" width="400" height="157">
            <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>
</body>
<script>
    var a = document.getElementById('myElementID');
    a.href = "http://"+window.location.hostname;
</script>
</html>

登录后复制

总结

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

以上就是解决 Nginx 自定义 400 错误页面 SSL 资源加载问题的详细内容，更多请关注php中文网其它相关文章！