React通过jQuery Ajax向Node服务端传值时数据显示undefined问题

问题原因 #

Node端的Express框架默认不会自动解析POST请求的请求体，必须配置对应中间件来处理请求的编码格式。你当前的代码缺少解析application/x-www-form-urlencoded格式请求体的中间件（jQuery Ajax默认使用该格式发送数据），导致req.body无法获取到数据。

解决方案 #

1. 配置Node端Express中间件 #

在Node服务代码中，添加express.urlencoded()中间件，放在所有路由定义之前：

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

// 解析application/x-www-form-urlencoded格式的请求体
app.use(express.urlencoded({ extended: true }));

// 若后续需要处理JSON格式请求，可额外添加以下中间件
// app.use(express.json());

app.post("/test", (req, res) => {
    console.log("Request received");
    console.log(req.body); // 现在能正常获取{ name: "John", place: "Alaska" }
    res.send("Data received"); // 记得给前端返回响应
});

app.listen(3000, () => console.log("Server running on port 3000"));

2. 前端Ajax可选优化（非必须） #

虽然jQuery Ajax默认会自动设置正确的contentType，但显式指定可避免潜在路径或格式问题：

console.log("Making Node API call");
$.ajax({
    method: "POST",
    url: "/test", // 建议加上斜杠，避免路径解析异常
    data: {
       name: "John",
       place: "Alaska"
    },
    contentType: "application/x-www-form-urlencoded; charset=UTF-8" // 显式指定编码格式
}).done(function( msg ) {
    console.log(msg);
});

关键说明 #

• extended: true允许解析复杂嵌套对象，若仅需简单键值对可设为false
• 若后续要发送JSON格式数据，前端需设置contentType: "application/json"，并将data转为JSON字符串（JSON.stringify(data)），同时Node端要配置express.json()中间件

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