Nginx SSL场景下自定义400错误页资源加载失败问题求助

问题原因 #

当你用HTTP访问SSL端口（比如http://192.168.1.1:789）时，Nginx会返回400系列错误页，但页面里的图片、CSS等资源用了相对路径（例如../error_pages/assets/images/img12.png），浏览器会尝试从http://192.168.1.1:789/error_pages/assets/images/img12.png请求资源——但这个端口只监听HTTPS，HTTP请求直接被拒绝，导致资源加载失败。

解决方案 #

方案1：把错误页资源改成绝对路径 #

直接修改错误页HTML里的资源路径，从相对路径改为基于站点根目录的绝对路径，确保浏览器能正确定位资源位置：
原路径示例：

<link rel="icon" href="../error_pages/assets/images/cropped.png" type="image/x-icon">
<img src="../error_pages/assets/images/img12.png" width="400" height="157">

修改为绝对路径：

<link rel="icon" href="/error_pages/assets/images/cropped.png" type="image/x-icon">
<img src="/error_pages/assets/images/img12.png" width="400" height="157">

所有CSS、背景图、图标等资源路径都改成以/开头的格式，统一指向站点根目录下的error_pages文件夹。

方案2：监听HTTP端口并强制重定向到HTTPS #

在现有Nginx配置中新增一个server块，专门处理789端口的HTTP请求，直接将所有请求重定向到HTTPS，从根源上避免用户用HTTP访问SSL端口的场景：

server {
    listen 789;
    server_name example.com;
    # 自动跳转到HTTPS地址
    return 301 https://$host:$server_port$request_uri;
}

这样用户输入http://192.168.1.1:789时，会被直接引导到https://192.168.1.1:789，错误页和资源都能正常加载。

方案3：简化错误页Nginx配置（可选） #

可以优化现有错误页的配置逻辑，减少重复代码，同时确保内部请求路径正确：

# 统一映射错误状态码到对应页面
error_page 404 495 496 497 500 502 503 /error_pages/$status.html;

location /error_pages {
    root /etc/nginx;
    internal; # 仅允许内部请求访问
}

注意：需要把你的错误页重命名为404.html、495.html等对应状态码的文件名，放在/etc/nginx/error_pages/目录下，配置会更简洁易维护。

总结 #

优先组合使用方案2+方案1：强制重定向HTTP到HTTPS解决根源访问问题，同时修改资源路径为绝对路径，避免其他场景下的路径错误。

内容的提问来源于stack exchange，提问作者Amin