Docker化NestJS/VueJS应用：API请求反向代理404问题排查

从核心环节逐一排查并修复：

1. 确认Docker网络连通性 #

• 确保NestJS（api）和Vue（nginx）容器处于同一网络，在docker-compose.yaml中配置统一网络：

  networks:
    app-net:
      driver: bridge
  
  services:
    api:
      # 其他配置...
      networks:
        - app-net
    vue:
      # 其他配置...
      networks:
        - app-net
  

• 进入Vue的Nginx容器，测试与NestJS服务的连通性：

  docker exec -it <vue容器名> ping api
  

  若ping不通，先修复网络配置，确保容器间能互相访问。

2. 修正Nginx反向代理规则 #

检查Vue项目的Nginx配置文件（如default.conf），重点调整proxy_pass的路径写法：

location /api/ {
  proxy_pass http://api:3000/;  # 末尾必须加斜杠，避免把/api前缀传给后端
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

如果省略末尾斜杠，请求/api/login会被转发成http://api:3000/api/login，而NestJS的路由是/login，自然返回404。

3. 核对Vue项目的请求配置 #

• 若使用Axios，确保baseURL设置为/api：

  axios.defaults.baseURL = '/api';
  

• 移除Vue CLI的devServer.proxy配置（vue.config.js），避免和Nginx的反向代理冲突。

4. 验证NestJS服务的可访问性 #

• 确认NestJS的main.ts监听0.0.0.0而非localhost，否则容器外无法访问：

  await app.listen(3000, '0.0.0.0');
  

• 进入NestJS容器，直接测试后端路由：

  docker exec -it <api容器名> curl localhost:3000/login
  

  若此请求也返回404，说明是后端路由本身的问题，先修复NestJS的路由配置。

5. 通过Nginx日志定位问题 #

查看Nginx的访问/错误日志，确认请求转发路径：

docker logs <vue容器名>

如果日志显示转发路径包含多余的/api前缀，回到步骤2修正Nginx配置。

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