React UI与Node.js通信异常问题求助（附代码片段）

嘿，我帮你梳理下这个React和Node.js之间的通信问题，咱们一步步来搞定它～

首先先把你提供的代码清晰列出来，方便分析：

React端原请求代码 #

var json = { json: JSON.stringify({ a: 1, b: 2 }), delay: 3 }; 
fetch('/saveInfo', { 
  method: 'post', 
  headers: { 
    'Accept': 'application/json, text/plain, */*', 
    'Content-Type': 'application/json' 
  }, 
  body: JSON.stringify(json.json) 
}) 
.then(function (response) { return response.json(); }) 
.then(function (result) { 
  alert(result); 
  console.log("The file was saved!"); 
}) 
.catch (function (error) { 
  console.log('Request failed'); 
});

Node端（Express）常见代码片段（补全你提到的部分） #

var express = require('express');
var app = express();

// 这里是很容易忽略的关键环节：解析JSON请求体的中间件
// app.use(express.json()); // Express 4.16+ 内置该中间件
// 旧版本需手动引入body-parser：
// var bodyParser = require('body-parser');
// app.use(bodyParser.json());

app.post('/saveInfo', function(req, res) {
  // 尝试获取请求体数据
  console.log(req.body);
  // 业务处理逻辑...
  res.json({ message: '操作完成' });
});

app.listen(3000, function() {
  console.log('Server running on port 3000');
});

问题定位 #

1. React端请求体格式错误：你定义的json.json已经是JSON.stringify({a:1,b:2})生成的字符串，之后又用JSON.stringify()再包裹一次，导致最终发送的是字符串化的字符串（比如"{\"a\":1,\"b\":2}"），而不是Node端期望的JSON对象。
2. Node端可能缺失JSON解析中间件：如果没配置express.json()或body-parser.json()，Express无法自动解析Content-Type: application/json的请求体，req.body会是undefined，自然无法正确处理请求。

修正方案 #

1. 调整React端请求代码

直接发送原始数据对象，只做一次JSON字符串化：

var data = { a: 1, b: 2, delay: 3 }; // 直接定义需要传递的原始数据
fetch('/saveInfo', { 
  method: 'post', 
  headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
  }, 
  body: JSON.stringify(data) // 仅做一次字符串化，生成标准JSON格式
}) 
.then(response => response.json()) 
.then(result => { 
  alert(JSON.stringify(result)); // 更清晰展示返回结果
  console.log("The file was saved!"); 
}) 
.catch(error => { 
  console.error('Request failed:', error); // 打印具体错误信息便于排查
});

2. 确保Node端配置解析中间件

如果使用Express 4.16及以上版本，直接添加内置的JSON解析中间件即可：

var express = require('express');
var app = express();

// 必须添加这一行，解析JSON格式的请求体
app.use(express.json());

app.post('/saveInfo', function(req, res) {
  console.log('Received data:', req.body); // 现在能正确拿到{a:1,b:2,delay:3}
  // 这里可以添加你的业务逻辑，比如数据存储、处理等
  res.json({ success: true, receivedData: req.body });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

验证步骤 #

1. 启动Node服务器，确认中间件配置生效
2. 运行React应用，触发fetch请求
3. 查看Node控制台的打印，确认req.body是正确的对象
4. React端应该能收到返回的JSON并弹出提示

这样调整后，React和Node之间的通信应该就能正常工作啦～

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