反向代理至子路径问题（Uptime Kuma状态页）

我在反向代理后使用Uptime Kuma，以下是可正常运行的Nginx配置：

server  {
    listen       80;
    listen  [::]:80;

    server_name    kuma.my-domain.com;
    location / {
        proxy_pass         $uptime_kuma_path;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade \$http_upgrade;
        proxy_set_header   Connection "upgrade";
        proxy_set_header   Host \$host;
        proxy_ssl_name \$host;
        proxy_ssl_server_name on;
        proxy_ssl_verify off;
        proxy_ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
        proxy_ssl_session_reuse off;
    }
}

我希望将status.my-domain.com指向kuma.my-domain.com/status/my-app，于是尝试了以下配置：

server  {
    listen       80;
    listen  [::]:80;

    server_name    status.my-domain.com;
    location / {
        proxy_pass         $uptime_kuma_path/status/my-app;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade \$http_upgrade;
        proxy_set_header   Connection "upgrade";
        proxy_set_header   Host \$host;
        proxy_ssl_name \$host;
        proxy_ssl_server_name on;
        proxy_ssl_verify off;
        proxy_ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
        proxy_ssl_session_reuse off;
    }
}

应用该配置后，status.my-domain.com显示空白页面，打开开发者工具后看到提示“Javascript is not enabled on this browser”，请问哪里配置错误了？

问题原因 #

你的配置存在两个关键错误：

1. 代理路径拼接错误：proxy_pass末尾未加斜杠，导致Nginx会把location的路径直接拼接到目标地址后。比如用户访问status.my-domain.com/js/app.js，实际会被代理到$uptime_kuma_path/status/my-appjs/app.js，静态资源路径完全错误，JS加载失败后就会触发“Javascript is not enabled”的提示。
2. Host头设置错误：你将Host设为当前域名status.my-domain.com，但Uptime Kuma服务绑定的是kuma.my-domain.com，这会让服务端生成的资源引用地址（如JS、CSS链接）仍指向kuma.my-domain.com，浏览器无法正确加载这些资源，最终页面空白。

修正后的配置 #

server  {
    listen       80;
    listen  [::]:80;

    server_name    status.my-domain.com;
    location / {
        # 末尾添加斜杠，确保路径正确映射
        proxy_pass         $uptime_kuma_path/status/my-app/;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade \$http_upgrade;
        proxy_set_header   Connection "upgrade";
        # 将Host设为Uptime Kuma的真实域名，让服务端生成正确的资源路径
        proxy_set_header   Host kuma.my-domain.com;
        proxy_ssl_name kuma.my-domain.com;
        proxy_ssl_server_name on;
        proxy_ssl_verify off;
        proxy_ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
        proxy_ssl_session_reuse off;
        # 添加X-Forwarded头，确保Uptime Kuma能正确识别反向代理环境
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

额外注意事项 #

• 确认$uptime_kuma_path变量指向Uptime Kuma服务的正确地址（比如http://localhost:3001）。
• 如果Uptime Kuma未开启子路径支持，需要先在Uptime Kuma的设置页面配置BASE_URL为/status/my-app，否则前端路由会出现异常。

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