Nginx 自定义 400 错误页面资源加载失败的解决方案-html教程-PHP中文网

Nginx 自定义 400 错误页面资源加载失败的解决方案

DDD

发布： 2025-11-18 11:33:06

原创

483人浏览过

nginx 自定义 400 错误页面资源加载失败的解决方案

本文旨在解决 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 错误页面，确保即使在协议错误的情况下也能显示友好的错误提示。

稿定PPT

海量PPT模版资源库

111

查看详情

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。

这种方法可以确保资源能够从正确的协议下加载，但需要修改所有的错误页面，维护成本较高。

总结与注意事项