Nginx反向代理Tomcat后无法加载JS/CSS问题求助

排查方向1：静态资源路径冲突 #

你的Nginx配置将域名根路径/代理到了后端的/context/，但如果后端应用生成的静态资源是带/context前缀的绝对路径（比如页面中引用/context/js/app.js），浏览器会向http://sub.domain.com/context/js/app.js发送请求，此时Nginx会将该请求转发到http://127.0.0.1:8080/context//context/js/app.js（路径重复），导致资源找不到。

修复方案1：调整Nginx配置，兼容/context路径的请求 #

在443端口的server块中添加一个专门匹配/context/的location规则，避免路径重复拼接：

server {
    listen    443    ssl http2;
    server_name sub.domain.com;

    ssl_certificate     /var/certs/sub.domain.com.cert;
    ssl_certificate_key /var/certs/sub.domain.com.pkey;
    ssl_protocols TLSv1.3;
    ssl_prefer_server_ciphers off;

    # 处理带/context前缀的静态资源请求
    location /context/ {
        proxy_set_header X-Forwarded-Host $host:$server_port;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme; # 告诉后端当前协议

        proxy_pass http://127.0.0.1:8080; # 末尾不带斜杠，保留原请求路径
    }

    # 处理根路径的页面请求
    location / {
        proxy_set_header X-Forwarded-Host $host:$server_port;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme; # 告诉后端当前协议

        proxy_pass http://127.0.0.1:8080/context/;
    }
}

修复方案2：修改应用的静态资源路径 #

如果可以修改应用代码，将静态资源的引用改为相对路径（比如js/app.js而非/context/js/app.js），或者直接使用根路径（/js/app.js），这样浏览器会向http://sub.domain.com/js/app.js发送请求，Nginx会自动转发到http://127.0.0.1:8080/context/js/app.js，匹配后端实际资源路径。

排查方向2：HTTPS混合内容问题 #

如果浏览器控制台提示“混合内容”错误，说明应用中仍有静态资源使用http协议引用，而当前域名是https，浏览器会阻止这类资源加载。

修复方案： #

在Nginx配置中添加X-Forwarded-Proto头（已在上面的配置中包含），让后端应用感知当前使用的是https协议，自动生成https开头的资源链接。

验证步骤 #

修改配置后，执行以下命令重启Nginx生效：

sudo nginx -t && sudo systemctl restart nginx

打开浏览器控制台（F12），查看网络请求，确认JS/CSS的请求路径和返回状态码是否正常（200）。

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