React+Node.js+Axios发送Post请求后端接收数据为undefined问题

你的请求格式与设置的Content-Type不匹配，导致服务器无法正确解析请求体：

• 你用JSON.stringify()把数据转成了JSON字符串，但请求头指定的是application/x-www-form-urlencoded，两种格式完全不兼容。
• 服务器的express.json()中间件仅解析Content-Type为application/json的请求，express.urlencoded()仅解析URL编码格式的请求。当前请求的内容既不是标准URL编码格式，也没有对应正确的Content-Type，最终导致req.body为空，data1自然返回undefined。

有两种可行修复方式，推荐第一种JSON格式方案：

方案一：使用JSON格式发送请求（推荐） #

Axios默认会把JavaScript对象序列化为JSON，并自动设置Content-Type为application/json，无需手动调用JSON.stringify()，也可以省略手动设置Content-Type：

修改后的React代码：

const fireAction = (data1, data2) => {
    const data = { data1, data2 }; // 直接传递对象，无需JSON.stringify
    const url = `http://localhost:5000/data/corr/fire`;
    const config = {
        headers: {
            'Authorization': 'AUTHCODE'
        }
    }
    axios.post(url, data, config)
        .then(response => console.log(response))
        .catch(error => console.log(error));
}

fireAction("Oklahoma", "Small apartment")

服务器端中间件可简化（Express 4.16+已内置bodyParser功能）：

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

方案二：使用x-www-form-urlencoded格式发送请求 #

如果必须使用该Content-Type，需要把数据转成URL编码格式，而非JSON字符串，可借助URLSearchParams处理：

修改后的React代码：

const fireAction = (data1, data2) => {
    const params = new URLSearchParams();
    params.append('data1', data1);
    params.append('data2', data2);
    const url = `http://localhost:5000/data/corr/fire`;
    const config = {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'AUTHCODE'
        }
    }
    axios.post(url, params, config)
        .then(response => console.log(response))
        .catch(error => console.log(error));
}

fireAction("Oklahoma", "Small apartment")

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