如何让React前端与后端服务分别运行在不同的端口？

架构老林

2026-9-27

解决方案

之前并发启动无端口冲突提示的原因是前端进程先抢占了5000端口，后端启动失败直接退出，因此没有冲突告警，也无法响应接口请求。

1. 固定后端服务端口

优先修改后端端口避开前端框架的默认端口，直接修改server.js中的监听端口即可，示例：

// server.js 原代码
// app.listen(5000, () => console.log('服务运行在5000端口'))
// 修改为
app.listen(8000, () => console.log('服务运行在8000端口'))

你也可以自行指定其他未被占用的端口，只要和后续前端端口不重复即可。

2. 通过craco配置固定前端端口

无需使用cross-env，直接在craco.config.js中添加devServer配置指定前端端口：

// craco.config.js
module.exports = {
  // 保留你原有的tailwindcss相关配置
  devServer: {
    port: 3000 // 可自定义为其他未被占用的端口，只要不和后端端口重复即可
  }
}

3. 配置跨域代理实现接口转发

因为前后端运行在不同端口会存在跨域问题，继续在craco配置中添加代理规则，保证/api前缀的请求可以正常转发到后端：

// craco.config.js
module.exports = {
  // 其他配置保持不变
  devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // 填写你后端实际运行的地址和端口
        changeOrigin: true
        // 如果后端接口没有/api前缀，可以添加以下配置去掉请求路径的/api
        // pathRewrite: { '^/api': '' }
      }
    }
  }
}

4. 调整启动脚本

修改package.json中的启动命令，确保前后端的启动逻辑正确：

{
  "scripts": {
    "start:server": "nodemon server.js",
    "start:client": "craco start",
    "start": "concurrently \"npm run start:server\" \"npm run start:client\""
  }
}