Axios POST请求body格式错误 Node.js服务端无法正常解析如何解决

问题根因 #

你遇到的是请求头声明的内容类型和实际传输的请求体格式不匹配导致的解析异常：你手动指定了Content-Type: application/x-www-form-urlencoded，但直接传递JS对象时，axios没有做对应格式的序列化处理，最终服务端会把完整的JSON字符串当成表单的键名，空字符串作为键值，就出现了你看到的{ '{"data":"someData"}': '' }的解析结果。

未设置请求头时req.body为空，是因为axios默认传递JS对象时会自动设置Content-Type: application/json，如果你的Node服务端没有配置对应的JSON解析中间件，就会拿到空结果。

解决方案 #

方案1：使用JSON格式传输（前后端对接首选）

这是最通用的对接方案，修改成本最低：

1. 移除axios实例中强制配置的application/x-www-form-urlencoded请求头，axios默认会自动为传递对象的POST请求设置正确的JSON类型请求头

import Axios from "axios";

const api = Axios.create({
  baseURL: "http://localhost:8000",
  timeout: 1000
});

await api.post("/",{data:"someData"});
populateData(); // a function that gets data from server

2. 确保你的Node服务端配置了JSON解析中间件，以Express为例，需要添加如下配置：

const express = require('express');
const app = express();
// 新增这行解析JSON格式的请求体
app.use(express.json());

配置完成后服务端打印req.body即可拿到正常的{ data: 'someData' }结果。

方案2：保持x-www-form-urlencoded格式传输

如果业务要求必须使用该格式，需要手动序列化请求参数：

方法A：用原生URLSearchParams（无需额外依赖，适合简单参数）

const params = new URLSearchParams();
params.append('data', 'someData');
await api.post("/", params);

方法B：用qs库序列化（适合嵌套、数组等复杂参数结构）

先安装依赖：
npm install qs
再修改请求代码：

import qs from 'qs';
await api.post("/", qs.stringify({data:"someData"}));

同时需要在Node服务端配置表单解析中间件，Express示例：

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

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