Docker Compose部署前后端项目时前端JS跨容器请求后端相关问题问询

推荐采用前端Nginx反向代理方案，可一次性解决你提到的两个核心问题，配置简单且安全性更高。

步骤1：统一前端接口请求前缀 #

修改Vue代码中的所有后端接口请求，统一加上/api前缀，例如原请求http://main:3000/user/list调整为/api/user/list，无需填写任何IP或域名信息。

步骤2：新增自定义Nginx配置 #

在前端项目根目录新建nginx.conf文件，替换容器默认的Nginx配置，内容如下：

events {}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    server {
        listen 80;
        server_name localhost;

        # 前端静态资源路由规则
        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # 后端接口反向代理规则
        location /api/ {
            # 直接填写Docker内网的后端服务地址，frontend容器可直接解析main服务名
            proxy_pass http://main:3000/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

步骤3：修改docker-compose.yml配置 #

调整frontend服务的挂载配置，把自定义的Nginx配置挂载到容器内，参考配置如下：

services:
  frontend:
    # 保留你原有镜像、构建规则等配置
    volumes:
      # 新增该行，替换默认Nginx配置
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports:
      # 确保前端端口映射到宿主机，示例映射为8080，可自行修改
      - "8080:80"
  main:
    # 后端原有配置无需修改，也不用额外暴露端口到宿主机，安全性更高

配置生效&验证 #

修改完成后执行docker-compose up -d重启服务，访问前端地址http://宿主机IP:8080发起接口请求即可正常访问。

方案原理说明 #

• 解决后端访问地址问题：浏览器发起的接口请求和前端页面同域名同端口，Nginx收到/api前缀的请求后自动转发到Docker内网的main:3000服务，无需在前端代码中维护后端地址。
• 解决CORS跨域问题：浏览器判定接口请求和前端页面同源，不会触发跨域校验，无需额外配置后端CORS规则。

备选方案（仅适合需要直接暴露后端服务的场景） #

如果不使用反向代理，可按如下配置：

1. 在docker-compose.yml中给main服务添加端口映射：

services:
  main:
    ports:
      - "3000:3000"

2. 前端接口请求地址填写http://宿主机IP:3000，本地测试可填http://localhost:3000，服务器部署填公网IP。
3. 在NestJS后端开启CORS配置，修改main.ts文件：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  // 生产环境建议替换*为实际允许的前端域名，提升安全性
  app.enableCors({ origin: "*" });
  await app.listen(3000);
}
bootstrap();

该方案缺点是后端端口直接暴露，且前端需要根据部署环境切换接口地址，维护成本更高。

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