使用Fetch API从React向Express传数据失败，请求无法被接收

问题根源及修复步骤 #

1. React端Fetch请求的body格式错误 #

Fetch的body不能直接传入JavaScript对象，必须序列化为JSON字符串，同时要设置Content-Type: application/json请求头，否则服务器无法识别并解析数据。

修正后的React代码：

const sendData = async () => {
  try {
    const response = await fetch("http://localhost:4000/register", {
      method: "POST",
      mode: "cors",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ "state": "its working" })
    });
    // 可选：处理服务器响应，避免请求挂起
    const result = await response.json();
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}

useEffect(() => {
  console.log("Effect started");
  sendData();
}, [user]);

2. Express端未配置必要中间件 #

Express默认不会自动解析JSON格式的请求体，必须添加express.json()中间件才能让req.body获取到数据；另外如果涉及跨域请求，还需要配置cors中间件。

修正后的Express代码：

const express = require('express');
const cors = require('cors'); // 先执行 npm install cors 安装依赖
const app = express();

// 配置CORS中间件，允许跨域请求
app.use(cors());
// 配置JSON解析中间件，解析请求体中的JSON数据
app.use(express.json());

app.route("/register").post((req, res) => {
  const postData = req.body.state;
  console.log(postData);
  // 必须给客户端返回响应，避免请求长期挂起
  res.json({ message: "数据已接收", receivedData: postData });
});

// 启动服务器，确保端口与React请求一致
app.listen(4000, () => {
  console.log("服务器运行在http://localhost:4000");
});

3. 额外检查项 #

• 确认已安装Express和CORS依赖：执行npm install express cors
• 检查React项目运行端口（通常为3000）和Express服务器端口（4000）是否与代码配置一致
• 打开浏览器控制台，查看是否存在网络请求错误或CORS相关报错，辅助定位问题

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