Express服务器在50001端口、React在3000端口，请求排查异常

我的Express服务器部署在50001端口，React应用运行在3000端口，不清楚问题出在哪里，麻烦协助排查。

服务器mjs文件代码 #

import Express from "express";
const port = process.env.PORT || 50001;
const app = Express();
import path from 'path'


app.get('/abc',(req,res) => {
    console.log("Resquest ip ",req.ip);
    res.send("Hello World Node js is here");

})

app.get('/application',(req,res) => {
    console.log("Resquest ip ",req.ip);
    res.send("Hello World Node js is here");

})

app.get('/kiet',(req,res) => {
    console.log("Resquest ip ",req.ip);
    res.send("Hello World Node js is here");

})

app.get('/computer',(req,res) => {
    console.log("Resquest ip ",req.ip);
    res.send("Hello World Node js is here");

})
const __dirname = path.resolve();
app.use('*',Express.static(path.join(__dirname,'./web/build')))

app.listen(port,()=>{
    console.log("App listening on port ",port)
})

运行情况说明 #

Node.js与React运行命令截图显示：

• React应用正常启动在3000端口
• Express服务启动在50001端口

错误分析与修复方案 #

1. 路由优先级与SPA路由处理问题 #

你的Express代码中，app.use('*', Express.static(...)) 作为通配路由会匹配所有未被前面GET路由捕获的请求，但这种写法无法正确处理React单页应用的前端路由——当用户在React应用中跳转前端路由时，会直接请求静态资源而非返回React的入口文件。

修复：调整静态资源与SPA路由的处理顺序，确保API路由优先，然后返回React的index.html处理前端路由：

// 先保留你的四个API GET路由
// ...

// 配置静态资源访问
app.use(Express.static(path.join(__dirname, './web/build')));

// 所有非API路由返回index.html，支持SPA前端路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, './web/build/index.html'));
});

2. 静态文件路径错误 #

需要确认./web/build路径是否正确——这个路径是相对Express服务启动时的工作目录，如果启动服务的目录与web/build所在目录不匹配，会导致静态资源无法加载。

验证：在代码中添加路径打印，检查实际路径是否存在：

const buildPath = path.join(__dirname, './web/build');
console.log("React构建文件路径：", buildPath);
// 启动服务后检查该路径下是否存在index.html、static等React构建产物

3. 跨域请求拦截 #

如果React应用直接调用Express的API接口，浏览器会因同源策略拦截请求，你的代码未配置跨域支持。

修复：安装并配置cors中间件：

npm install cors

在Express代码中引入并启用：

import cors from 'cors';
// 开发环境允许3000端口请求，生产环境可替换为正式域名
app.use(cors({ origin: 'http://localhost:3000' }));

4. React API请求路径错误 #

如果React中使用相对路径请求API（如/abc），请求会发送到React所在的3000端口，而非Express的50001端口，导致无法命中API接口。

修复：

• 方法一：在React项目的package.json中添加代理：

  "proxy": "http://localhost:50001"
  

  重启React服务后，相对路径请求会自动转发到Express服务。
• 方法二：请求时使用绝对路径，如：

  fetch('http://localhost:50001/abc')
  

内容的提问来源于stack exchange，提问作者Abrar ul Hassan