React无法连接Node.js Express后端，新手寻求技术帮助

核心问题分析 #

1. 接口路径不匹配：前端请求的是/message接口，但你的Express后端只定义了/server接口，导致请求返回404错误。
2. 端口冲突：前端和后端都使用了5174端口，这会导致其中一个服务无法启动，或者请求发送到错误的服务。
3. 后端缺少启动脚本：你的package.json没有配置启动后端服务的脚本，无法便捷启动服务。
4. 后端入口文件配置错误：package.json的main字段是index.js，但实际后端入口是server.js，可能导致启动异常。

分步解决方法 #

1. 修正接口路径匹配

方案一：修改后端接口路由
将后端的接口路径改为前端请求的/message，修改server.js：

const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());
app.use(express.json());

// 修改接口路径为/message，匹配前端请求
app.get("/message", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// 更换后端端口为3000，避免和前端冲突
app.listen(3000, () => {
  console.log(`Server is running on port 3000.`);
});

方案二：修改前端请求路径
如果不想改后端，也可以把前端的请求路径改为/server，同时调整后端端口（见下一步）。

2. 避免端口冲突

将后端端口改为和前端不同的端口（比如3000），同时修改前端的请求地址为后端新端口：
修改App.jsx中的fetch地址：

useEffect(() => {
  // 指向后端的3000端口
  fetch("http://localhost:3000/message")
    .then((res) => res.json())
    .then((data) => setMessage(data.message));
}, []);

3. 配置后端启动脚本

修改后端的package.json，添加启动脚本并修正入口文件：

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js", // 修正为实际入口文件
  "scripts": {
    "start": "node server.js", // 生产环境启动
    "dev": "nodemon server.js", // 开发环境热重载启动
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

启动与验证 #

1. 启动后端：在后端项目目录下运行 npm run dev（开发环境）或 npm start（生产环境），看到控制台输出Server is running on port 3000.说明启动成功。
2. 启动前端：正常启动你的React项目（比如npm run dev）。
3. 查看页面：前端页面应该会显示Hello from server! Iam from the backend，表示连接成功。

内容的提问来源于stack exchange，提问作者jj-ammar