解决 Nginx 自定义 400 错误页面资源加载失败的问题 (SSL)

本文旨在解决在使用 Nginx 配置自定义 400 错误页面时，当用户通过 HTTP 访问 HTTPS 端口导致资源加载失败的问题。我们将分析问题原因，并提供配置 Nginx 以正确处理 HTTP 和 HTTPS 请求的解决方案，确保自定义错误页面能够正常显示。通过配置 `default_server`，我们可以有效地管理所有进入服务器的请求，并提供一致的用户体验。

在使用 Nginx 配置 SSL 时，如果用户尝试通过 HTTP 访问 HTTPS 端口，可能会遇到自定义 400 错误页面显示，但其关联的资源（如图片、CSS 文件）无法加载的问题。这通常是因为 Nginx 无法找到与 HTTP 请求匹配的服务器块配置。

问题分析

Nginx 根据端口、协议（HTTP 或 HTTPS）和 server_name 来匹配请求的服务器块。当用户在 HTTPS 端口上发起 HTTP 请求时，由于协议不匹配，Nginx 可能无法找到合适的服务器块来处理该请求，从而返回 400 错误。

问题在于，错误页面中的资源路径通常是相对路径，例如：

<img src="../error_pages/assets/images/img12.png">

当浏览器尝试加载这些资源时，它会基于错误的协议（HTTP）和端口（HTTPS 端口）构建 URL，导致资源请求失败。例如，如果用户访问 http://192.168.1.1:789，浏览器可能会尝试加载 http://192.168.1.1:789/error_pages/assets/images/img12.png，但由于 Nginx 没有配置处理该 HTTP 请求的服务器块，资源将无法加载。

解决方案：配置 default_server

解决此问题的最佳方法是配置一个 default_server 来处理所有未匹配的 HTTP 和 HTTPS 请求。default_server 确保 Nginx 始终有一个服务器块来处理任何传入的请求，即使它与任何显式配置的服务器块都不匹配。

以下是如何配置 default_server 的步骤：

燕雀Logo

为用户提供LOGO免费设计在线生成服务

101

查看详情

1. 创建 HTTP 服务器块： 创建一个新的服务器块来监听 HTTP 端口（通常是 80）。将此服务器块配置为 default_server。
2. 处理 HTTP 请求： 在 default_server 块中，您可以选择将所有 HTTP 请求重定向到 HTTPS，或者提供一个自定义的错误页面。

以下是一个示例 Nginx 配置：

server {
    listen 80 default_server;
    server_name _; # 匹配所有域名

    # 将所有 HTTP 请求重定向到 HTTPS
    return 301 https://$host$request_uri;

    # 或者，提供一个自定义错误页面
    # root /var/www/error_pages;
    # index index.html;
}

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

在这个例子中，第一个 server 块监听 80 端口，并被指定为 default_server。它使用 return 301 指令将所有 HTTP 请求重定向到相应的 HTTPS 地址。您可以根据需要修改此配置，例如，提供一个自定义的 HTTP 错误页面。

注意事项：

• 确保 default_server 块位于 Nginx 配置文件的顶部，以便它能够首先被匹配。
• server_name _ 匹配所有域名，因此可以处理任何未配置的域名请求。
• 如果选择重定向到 HTTPS，请确保您的 HTTPS 配置正确，并且 SSL 证书有效。

其他解决方案

虽然配置 default_server 是推荐的方法，但还有其他一些可能的解决方案：

• 修改错误页面中的资源路径： 将错误页面中的资源路径更改为绝对路径，例如 https://example.com/error_pages/assets/images/img12.png。这可以确保浏览器始终使用正确的协议和域名来加载资源。但是，这种方法需要在多个地方进行更改，并且如果域名发生更改，则需要更新所有路径。
• 配置 Nginx 处理 HTTP 请求： 您可以配置 Nginx 来处理 HTTPS 端口上的 HTTP 请求。但是，这可能会导致安全问题，因为您需要处理非加密的流量。不建议使用此方法。

总结

通过配置 default_server，您可以有效地解决 Nginx 自定义 400 错误页面资源加载失败的问题。这种方法确保 Nginx 始终能够处理任何传入的请求，并提供一致的用户体验。同时，它也允许您更好地控制进入服务器的流量，并实施安全策略。记住，在修改 Nginx 配置文件后，始终要重新加载配置以使更改生效：

sudo nginx -t # 测试配置
sudo nginx -s reload # 重新加载配置

希望本教程能帮助您解决 Nginx 配置中的问题！

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