React对接Node.js时proxy不生效及5000端口配置问题咨询

你当前配置存在3个核心错误：

• 端口冲突：你已经让Express后端服务监听了5000端口，同一时间单个端口只能被一个进程占用，无法同时启动React服务和Node服务在同一个5000端口。
• Proxy配置位置错误：你使用的是react-scripts 5.x版本的Create React App脚手架，package.json中自定义的devServer字段不会被脚手架识别，该字段是原生webpack-dev-server的配置项，CRA对代理配置有固定的写法要求，自定义的devServer配置不会生效。
• 代理规则格式错误：你写的/api/**通配规则不符合CRA代理配置的格式要求，无法正确匹配接口路径。

根据你要把React服务跑在5000端口的诉求，分两种场景选择配置：

方案1：开发环境前后端分离（推荐开发调试用） #

开发阶段前后端分开启动，React服务占用5000端口，后端服务换用其他不冲突的端口（比如5001），通过代理转发接口请求解决跨域。

1. 修改后端服务端口
   打开你的server.js，修改监听端口配置，避开5000：

// 省略其他原有代码
server.listen(process.env.PORT || 5001,()=>{
    console.log('backend service start at port 5001');
}) 

2. 修正代理配置
   先删掉package.json里你写的整个devServer字段，二选一配置代理：

• 简单代理配置（适合只有一个后端服务的场景）：直接在package.json最外层（和name、version字段同级）加一行配置：

"proxy": "http://localhost:5001"

• 多路径代理配置（适合有多个后端服务的场景）：先执行npm i http-proxy-middleware -D安装依赖，在src目录下新建setupProxy.js文件，写入以下内容：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5001',
      changeOrigin: true,
      secure: false
    })
  );
};

3. 配置React服务启动端口为5000
   修改package.json里的start脚本，跨系统兼容可以先执行npm i cross-env -D，然后把脚本改成：

"scripts": {
  "start": "cross-env PORT=5000 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

配置完成后分别启动后端服务和React start脚本，访问localhost:5000即可正常加载React页面，前端写的fetch('/api')请求会自动转发到5001端口的后端接口，不会出现跨域问题。

方案2：前后端同端口部署（适合生产环境） #

如果不想启动两个服务，要让前后端都通过5000端口访问，可以让Express后端直接托管React打包后的静态资源，不需要额外配置代理：

1. 先在React项目目录执行npm run build，打包生成build静态资源文件夹。
2. 修改server.js，添加静态资源托管和前端路由兜底配置：

const express = require('express');
const server = express();
const cors = require('cors');
const path = require('path');

server.use(cors())
// 托管React打包后的静态资源
server.use(express.static(path.join(__dirname, 'build')));

server.get('/api',(req,res)=>{
    res.json({"server":["ready","link start"]})
})

// 兜底路由，所有非接口请求返回React入口文件，支持前端路由跳转
server.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

server.listen(process.env.PORT || 5000,()=>{
    console.log('service start at port 5000');
}) 

3. 不需要执行React的start脚本，直接启动server.js，访问localhost:5000就能同时访问前端页面和后端接口。

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