axios POST 请求体编码笔记

axios POST 请求体编码笔记

一句话结论

在 axios 里发表单参数，传字符串 ids=值，不要传普通对象 { ids }。

核心：两个互相独立的机制

机制一 · 是否序列化，由「数据类型」决定

axios 0.21.4 的 transformRequest 只有三个分支：

传入类型	axios 的处理	最终 body
URLSearchParams	自动 .toString()	a=1&b=2
普通对象 {}	自动 JSON.stringify	{"ids":"..."}
字符串	原样返回，不处理	你写什么就发什么

源码：node_modules/axios/lib/defaults.js L70-L78

机制二 · 显示成什么分区，由「Content-Type」决定

axios 给 post 写死了默认头：

var DEFAULT_CONTENT_TYPE = { 'Content-Type': 'application/x-www-form-urlencoded' };

源码：node_modules/axios/lib/defaults.js L7-L9

• Content-Type 是 x-www-form-urlencoded → Chrome 显示 Form Data ，按 name=value 用 & 拆分
• body 是 JSON 文本 → Chrome 显示 Request Payload，渲染成 JSON 树

⚠️ Form Data 分区必须 有 =，否则只显示一行裸值，没有"参数名"。

三种写法对照

	情况 1 · 传裸字符串	情况 2 · 传对象	情况 3 · 传 ids=值 ✅
代码	"377...,377..."	{ ids }	ids=${ids}
axios 处理	原样发送	自动 JSON 化	原样发送
实际 body	377...,377...	{"ids":"377...,377..."}	ids=377...,377...
Content-Type	urlencoded	JSON 语义	urlencoded
DevTools 显示	Form Data · 无键值	Request Payload · JSON	Form Data · 键值完整
后端结果	❌ 拿不到 ids	❌ 表单解析失败	✅ 正确拿到

排错速查表

看到的现象	根因
Form Data 里只有一行裸值、没有参数名	传的是裸字符串，缺 name= 前缀
显示 Request Payload / 带 {}	传了普通对象，axios 自动 JSON 化了
后端说收不到参数	body 形态和 Content-Type 不匹配
想发 JSON 却发成了表单	忘了显式写 Content-Type: application/json

可用的三种正确写法

// 1. 自己拼串（本项采用）
await post(url, `ids=${ids}`)

// 2. URLSearchParams，axios 会自动 toString
await post(url, new URLSearchParams({ ids }))

// 3. 需要 JSON 时显式指定头
await post(url, { ids }, { headers: { 'Content-Type': 'application/json' } })

第 3 条注意：axios 对普通对象 始终是 JSON 化，即使配了 x-www-form-urlencoded 头也不会转成 name=value，所以真正可靠的只有第 1、2 种。

---