React项目自定义端口不生效及端口占用冲突问题咨询

你遇到的端口冲突和日志打印异常本质是同时运行了两个独立的Node服务，两者端口配置逻辑完全隔离：

• 你用cross-env修改的PORT变量，作用对象是React前端开发服务（由create-react-app等脚手架内置的开发服务器提供）
• 你写的server.js是独立的后端Mock接口服务，默认读取进程启动的第3位参数作为端口，和前端服务的环境变量无关，两个进程不能监听同一个端口，这就是同时配置3500时报端口占用的原因。

1. 先给两个服务分配不同端口 #

前端开发服务和后端Mock服务必须使用不同端口，比如前端用3000、后端用3500，避免冲突。

2. 调整后端服务的端口配置（二选一即可） #

方案A：通过启动参数传端口 #

你的server.js默认读取process.argv[3]作为端口，启动时直接在命令里传参即可：

node server.js ./data.js 3500

如果是用concurrently等工具并行启动前后端，可把package.json脚本改成：

{
  "scripts": {
    "start:client": "cross-env PORT=3000 react-scripts start",
    "start:server": "node server.js ./data.js 3500",
    "start": "concurrently \"npm run start:client\" \"npm run start:server\""
  }
}

方案B：调整server.js逻辑，读取环境变量作为端口 #

修改server.js里的端口定义行，和前端服务保持相同的配置逻辑：

// 把原来的 const port = process.argv[3] || 3500; 改成下面的代码
const port = process.env.SERVER_PORT || 3500;

启动时就可以通过cross-env指定后端端口：

cross-env SERVER_PORT=3500 node server.js

3. 额外优化：配置前端代理避免跨域 #

如果前端要请求后端的/api接口，可在React项目的package.json中增加代理配置：

"proxy": "http://localhost:3500"

配置后前端所有接口请求会自动转发到后端服务，无需修改接口调用地址，也不会出现跨域问题。

注：你提供的server.js代码缺失express依赖引入，顶部需补充const express = require("express");否则运行会报错。

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