容器化部署后NestJS+React应用的CORS问题解决

• 后端基于NestJS开发，通过app.enableCors()开启CORS，运行端口为localhost:3001
• 前端使用React，运行在localhost:3000，请求后端接口地址为localhost:3001
• 本地Mac OS环境下运行无CORS问题；在Debian 11远程实例中容器化部署后出现CORS错误，浏览器开发者工具显示请求发起方同时包含localhost和实例IP
• 使用的docker-compose配置如下：

version: '3.9'

services:
  postgres:
    image: postgres
    container_name: postgres_db
    restart: always
    environment:
      POSTGRES_DB: ${POSTGRES_DB}
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
    ports:
      - '5432:5432'
    volumes:
      - postgres_data:/var/lib/postgresql/data
  app:
    build:
        context: .
        dockerfile: Dockerfile
    environment:
        - API_KEY=${API_KEY}
    ports:
        - '3001:3001'
    depends_on:
        - postgres
    volumes:
        - ./src:/app/src
  front:
    build:
        context: ../tickets-admin-front/frontend/.
        dockerfile: Dockerfile
    ports:
        - '3000:3000'

volumes:
  postgres_data:

1. 显式配置NestJS的CORS允许源 #

默认app.enableCors()虽允许所有源，但容器环境下请求头的Origin可能携带实例IP，导致验证异常。需明确指定允许的源：
修改NestJS的CORS配置：

app.enableCors({
  origin: [
    'http://localhost:3000',
    `http://${process.env.INSTANCE_IP}:3000` // 替换为远程实例的公网IP
  ],
  credentials: true, // 若前端需携带Cookie或认证信息则开启
});

在docker-compose的app服务中添加环境变量传递实例IP：

app:
  # 保留原有配置
  environment:
    - API_KEY=${API_KEY}
    - INSTANCE_IP=${INSTANCE_IP} # 在.env文件中设置INSTANCE_IP为远程实例公网IP

2. 修正前端请求地址 #

远程实例中，前端容器内的localhost指向容器自身而非宿主机，需将请求地址改为实例IP或Docker服务名：
在前端项目中通过环境变量配置API地址，修改docker-compose的front服务：

front:
  # 保留原有配置
  environment:
    - REACT_APP_API_BASE_URL=http://${INSTANCE_IP}:3001

前端请求时使用process.env.REACT_APP_API_BASE_URL拼接接口路径。

3. 检查Debian的网络与防火墙配置 #

• 重启Docker服务确保网络正常：

sudo systemctl restart docker

• 开放必要端口的防火墙规则：

sudo ufw allow 3000/tcp
sudo ufw allow 3001/tcp
sudo ufw reload

4. 利用Docker内部网络通信（推荐） #

前后端均在容器中时，可直接通过Docker服务名访问后端，绕过浏览器CORS限制：
修改docker-compose的front服务环境变量：

front:
  # 保留原有配置
  environment:
    - REACT_APP_API_BASE_URL=http://app:3001 # app为docker-compose中后端服务名

此方式下前端容器直接访问后端容器，无需额外CORS配置，更适配容器化部署场景。

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