Docker中Nginx多应用路由配置问题求助

我有三个部署在不同地址的应用：

• auth（localhost:59500）
• manage（localhost:59501）
• files（localhost:59502）

manage和files可通过auth的菜单访问，单独访问这些应用都正常，但Nginx配置后出现以下问题：

• 访问http://localhost:9190能正常进入auth并完成登录
• 访问http://localhost:9190/manage/Home时，页面能加载但所有CSS报404错误
• 异常时页面会跳转到http://localhost:9190/Home，而非预期的http://localhost:9190/manage/Home

当前Nginx配置 #

（Nginx监听http://localhost:9190）

upstream auth {
    server auth.web;
}
upstream manage {
    server manage.web;
}
upstream files {
    server files.web;
}


server {
    listen 80;

    server_name localhost;
    server_tokens off;
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";


    location /{
        proxy_set_header Authorization $http_authorization;
        proxy_pass_header Authorization; 
        proxy_pass http://auth/;
    }
    location /auth/{
        proxy_set_header Authorization $http_authorization;
        proxy_pass_header Authorization; 
        proxy_pass http://auth/;
    }
    location /manage/{
        proxy_set_header Authorization $http_authorization;
        proxy_pass_header Authorization; 
        proxy_pass http://manage/;
    }

    location /files/{
        proxy_set_header Authorization $http_authorization;
        proxy_pass_header Authorization; 
        proxy_pass http://files/;
    }
}

尝试过的配置（仍有资源加载问题） #

location ^~ /manage{
    proxy_set_header Authorization $http_authorization;
    proxy_pass_header Authorization; 
    proxy_pass http://manage/manage;
}
location ^~ /manage/{
    proxy_set_header Authorization $http_authorization;
    proxy_pass_header Authorization; 
    proxy_pass http://manage/manage/;
}

额外发现 #

加载失败的CSS和JS文件Content-Type为text/html，而正常加载的文件Content-Type是application/javascript或text/css。

解决方案 #

1. 修复反向代理的请求转发逻辑 #

问题核心是manage应用的静态资源路径（如/css/main.css）会被Nginx路由到auth应用，导致404。需要确保所有/manage/开头的请求都转发到manage应用，并补充必要的请求头让后端识别真实请求：

location /manage/ {
    proxy_set_header Authorization $http_authorization;
    proxy_pass_header Authorization;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://manage/;
}

2. 修正后端应用的上下文路径 #

后端应用跳转时生成的是根目录路径（如/Home），需要让manage应用知道自身运行在/manage前缀下：

• 若为Spring Boot应用：在application.properties中设置server.servlet.context-path=/manage
• 若为Vue应用：在vue.config.js中设置publicPath: '/manage/'
  这样应用生成的所有链接都会自动带上/manage前缀，避免跳转丢失路径。

3. 确保静态资源的Content-Type正确 #

如果后端返回的静态资源Content-Type异常，先检查manage应用的静态资源路由配置是否正确。若需要，可在Nginx的server块中明确指定MIME类型：

types {
    text/css css;
    application/javascript js;
    image/png png;
    # 按需添加其他资源类型
}

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