Docker化Nginx与Vue+Nuxt无法连接前端服务器：连接被拒绝

首先明确：502 Bad Gateway错误和CORS无关。CORS是浏览器层面的跨域访问限制，只会在浏览器控制台报跨域相关错误，而502是Nginx无法和上游的frontend服务建立TCP连接，属于服务器端的网络连通性问题。

结合你已做的调试（IP正确、ping连通、前端日志显示监听3000），核心问题大概率是前端服务没有监听容器的所有网络接口，而是只监听了localhost(127.0.0.1)，导致同Docker网络内的Nginx无法访问。

排查与解决步骤 #

1. 检查前端服务的监听地址 #

Nuxt/Vue默认启动时可能只绑定127.0.0.1，这在容器内部只有自身能访问，其他容器（比如Nginx）无法连接。需要改成监听0.0.0.0：

• Nuxt项目：
  • 启动命令添加参数：npm run dev -- --host 0.0.0.0
  • 或在nuxt.config.js中配置：

    export default {
      server: {
        host: '0.0.0.0'
      }
    }
    

• Vue CLI项目：
  • 启动命令添加参数：vue-cli-service serve --host 0.0.0.0
  • 或在vue.config.js中配置：

    module.exports = {
      devServer: {
        host: '0.0.0.0'
      }
    }
    

2. 验证容器内部的服务监听状态 #

进入frontend容器，执行以下命令确认服务监听的地址：

# 进入容器
docker exec -it frontend bash
# 检查端口监听情况
netstat -tulpn | grep 3000

如果输出显示127.0.0.1:3000，说明确实只绑定了本地回环地址，需要调整上述配置；如果是0.0.0.0:3000，再继续排查其他可能。

3. 检查Dockerfile的启动命令 #

确保前端容器的Dockerfile中，启动命令包含了监听0.0.0.0的参数，比如：

# Nuxt示例
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

# Vue CLI示例
CMD ["npm", "run", "serve", "--", "--host", "0.0.0.0"]

如果Dockerfile里的启动命令没有加--host 0.0.0.0，即使本地开发时正常，容器内也会出现无法外部访问的问题。

4. 排除服务就绪延迟问题 #

虽然depends_on保证了容器启动顺序，但frontend可能需要等待api服务完全就绪后才能正常响应请求。可以给frontend添加健康检查，确保服务真正就绪后Nginx才转发请求：
在docker-compose.yml的frontend服务中添加：

frontend:
  # 其他配置不变
  healthcheck:
    test: ["CMD", "curl", "-f", "http://localhost:3000"]
    interval: 5s
    timeout: 5s
    retries: 5

同时给nginx服务添加depends_on的条件：

nginx:
  # 其他配置不变
  depends_on:
    api:
      condition: service_started
    frontend:
      condition: service_healthy

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