Nginx反向代理qbittorrent-nox仅加载HTML、其他页面无法访问如何解决

问题原因 #

• 基础代理配置未透传必要请求头：qbittorrent WebUI生成CSS、JS等静态资源路径、校验请求合法性时依赖Host、X-Forwarded系列请求头，缺少这些头会导致资源路径生成错误、跨域/CSRF校验拦截，最终CSS加载失败、JS执行异常。
• 未配置WebSocket转发支持：qbittorrent WebUI依赖WebSocket实现实时状态同步，默认Nginx配置不支持WebSocket转发，会导致登录后长连接建立失败，页面直接空白。

修正方案 #

替换你的Nginx server块配置为以下内容，将MyIpHere替换为你实际的目标设备IP：

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

        location / {
                proxy_pass http://MyIpHere:8081/;
                # 透传客户端和请求基础信息
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                
                # 启用WebSocket转发支持
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                
                # 调整长连接超时时间避免连接中断
                proxy_read_timeout 300s;
                proxy_send_timeout 300s;
        }
}

配置修改完成后执行以下操作生效：

1. 执行nginx -t校验配置语法是否正确，确认返回test is successful后再进行下一步
2. 执行nginx -s reload重载Nginx配置
3. 清理浏览器缓存后重新访问服务测试
   如果修改后仍存在异常，进入qbittorrent-nox的WebUI设置页，开启「反向代理支持」选项，并将你的VPS公网IP添加到信任代理列表即可。

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