React搭配Node.js Express开发时代理服务器异常问题求解

问题根因 #

• 你配置的 react-scripts start && nodemon server.js 中，&& 是串行执行逻辑：只有前一个命令执行完成退出后，才会触发后一个命令运行。而 react-scripts start 启动 React 开发服务后会持续占用前台进程，不会主动退出，导致后端服务一直没有启动，5000 端口没有服务监听，因此前端代理请求时抛出 ECONNREFUSED 连接拒绝错误。
• 代理请求失败时，React 开发服务会返回纯文本格式的错误提示，内容以 Proxy error 开头，首字符是 P，你的前端代码直接将非 JSON 格式的返回内容用 .json() 方法解析，就会触发 JSON 格式解析错误。

修复方案 #

要同时运行前后端两个服务，需要使用并行执行逻辑，推荐以下两种方案：

方案1：跨平台通用方案（兼容Windows/Mac/Linux） #

使用 concurrently 工具实现多命令并行执行：

1. 安装依赖：

npm install concurrently --save-dev

2. 修改 package.json 脚本配置：

"scripts": {
  "start": "concurrently \"react-scripts start\" \"nodemon server.js\"",
  "start:front": "react-scripts start",
  "start:back": "nodemon server.js"
}

后续执行 npm start 即可同时启动前后端服务，控制台会自动区分两个服务的日志输出。

方案2：系统原生并行语法 #

• 如果你使用 Mac/Linux 系统，直接把 && 替换为后台执行符 & 即可：

"start": "react-scripts start & nodemon server.js"

• 如果你使用 Windows 系统，用 start 命令分别拉起两个独立进程：

"start": "start react-scripts start && start nodemon server.js"

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