React与Express跨设备通信问题：无需硬编码IP的解决方案

问题根源 #

• React硬编码localhost:5000作为API地址：从外部机器访问虚拟机的React应用时，浏览器会将localhost解析为当前访问者的本地机器，而非运行Express服务的虚拟机，导致通信失败。
• Express的CORS配置硬编码localhost:3000：外部访问的请求origin是虚拟机IP，不在允许列表内，被CORS拦截。

非Docker环境的替代方案 #

1. React动态生成API地址

放弃硬编码localhost，改用当前页面的主机地址动态拼接：

const api = axios.create({
  baseURL: `http://${window.location.hostname}:5000`
})

不管在哪台机器访问，React都会自动使用当前页面的主机IP请求后端服务。

2. 灵活配置Express的CORS规则

不要固定origin值，改成允许动态匹配：

// 开发环境可直接允许所有origin（生产环境需限制）
router.use(cors({
  origin: true,
  credentials: true // 需要携带Cookie等凭证时开启此项
}))

// 或者用环境变量控制origin，方便不同环境切换
const allowedOrigin = process.env.CORS_ORIGIN || 'http://localhost:3000'
router.use(cors({
  origin: allowedOrigin
}))

Docker化环境的docker-compose配置方案 #

既然应用已经Docker化，推荐用容器网络和环境变量彻底解决IP硬编码问题：

1. 利用Docker内部网络通信（无需暴露5000端口给外部）

在docker-compose.yml中，将React和Express服务放在同一个默认网络里，React直接通过服务名访问Express：

version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    environment:
      # Docker内部会自动解析服务名对应的容器IP
      REACT_APP_API_URL: http://backend:5000
  backend:
    build: ./backend
    ports:
      - "5000:5000" # 可选：仅需直接访问后端API时暴露
    environment:
      # 允许React服务的地址访问
      CORS_ORIGIN: http://frontend:3000

React代码中读取环境变量：

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL
})

2. 适配外部访问的CORS配置

如果需要从外部通过虚拟机IP访问React，Express的CORS可以设置为允许虚拟机IP或通配符（开发环境）：

// 后端代码
const allowedOrigin = process.env.CORS_ORIGIN || '*'
router.use(cors({
  origin: allowedOrigin
}))

在docker-compose.yml的backend服务中设置环境变量：

environment:
  CORS_ORIGIN: "http://<虚拟机IP>:3000" # 或者用*允许所有

3. 统一端口映射

确保docker-compose中正确映射端口，外部通过虚拟机IP:3000访问React，React内部通过服务名访问Express，无需修改代码即可在不同机器运行。

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