Docker Compose中前端JS调用其他容器后端服务失败求助

核心问题根源 #

前端JS代码在宿主浏览器中执行，此时localhost指向的是浏览器所在的宿主机器，但出现404的核心原因大概率是：前端实际请求的路径与后端路由不匹配，或是环境变量未正确注入、反向代理配置存在路径映射错误。

第一步：排查前端请求的实际路径 #

1. 打开浏览器开发者工具（F12），切换到Network面板，触发前端请求，查看请求的完整URL、HTTP方法、响应详情：
   • 确认URL是否与你手动测试的http://localhost:4000/my-test完全一致，有没有多斜杠、路径拼接错误（比如变成http://localhost:4000//my-test或遗漏/my-test）。
   • 检查请求方法是否与后端路由匹配（比如后端/my-test只支持GET，但前端用了POST，部分框架会返回404）。
2. 打印环境变量值：在前端代码中添加console.log(process.env.SERV_URL)（或对应框架的环境变量读取方式），确认环境变量是否正确注入。

第二步：验证后端路由配置 #

1. 登录后端容器，直接在容器内部测试路由：

   docker exec -it <backend-container-id> curl http://localhost:4000/my-test
   

   确认后端服务确实能响应该路径。
2. 检查后端路由的大小写、前缀是否与前端请求匹配（比如后端实际是/MyTest或/api/my-test，但前端请求的是/my-test）。

第三步：正确配置Nginx反向代理（推荐方案） #

如果要通过Nginx统一代理前端和后端，避免跨域和localhost路径问题，可按以下配置调整：

1. 修改docker-compose.yml

services:
  backend:
    build: ./backend/
    networks:
      - app-network

  frontend:
    build: ./frontend/
    environment:
      - SERV_URL=/api/my-test # 使用相对路径，避免硬编码localhost
    networks:
      - app-network

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf # 挂载自定义Nginx配置
    depends_on:
      - frontend
      - backend
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

2. 编写nginx.conf配置文件

events {}

http {
  # 定义后端服务集群
  upstream backend_service {
    server backend:4000; # 使用Docker内部服务名，无需暴露端口给宿主
  }

  server {
    listen 80;

    # 代理前端静态资源
    location / {
      proxy_pass http://frontend:3000;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }

    # 代理后端API请求：将 /api/ 路径转发到后端的根路径
    location /api/ {
      proxy_pass http://backend_service/; # 注意末尾的斜杠，会自动替换路径前缀
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }

3. 前端代码适配

确保前端请求使用相对路径/api/my-test，Nginx会自动将其转发到后端的http://backend:4000/my-test。

第四步：处理前端环境变量注入问题 #

如果前端是React/Vue等框架的静态打包产物，注意：

• React需使用REACT_APP_SERV_URL作为环境变量前缀，否则打包时不会注入。
• Vue需在vue.config.js中配置环境变量，或使用运行时替换（比如通过Nginx的sub_filter替换静态文件中的变量占位符）。

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