JSON是文本交换格式规范,本质为字符串而非JS对象;需用JSON.stringify()序列化发送,用response.json()解析接收,且须正确设置Content-Type和后端中间件。
JavaScript 中的 JSON 不是数据类型,也不是对象,而是一套**文本交换格式规范**。它长得像 JS 对象字面量,但本质是字符串——这点必须分清。常见错误就是把一个 JS 对象直接当 JSON 用,结果在 fetch 请求体里传了对象却没序列化,服务器收不到或报错 400 Bad Request。
JSON.stringify({name: "Alice"}) → 得到字符串 '{"name":"Alice"}',这才是合法 JSON{name: "Alice"} 是 JS 对象,不是 JSON;直接传给 fetch 的 body 会出错浏览器默认不会自动把 JS 对象转成 JSON 字符串,也不会自动设置请求头。漏掉任一环节,后端大概率解析失败或返回 400。
fetch('/api/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json' // 必须显式声明
},
body: JSON.stringify({id: 123, status: 'active'}) // 必须手动 stringify
})
app.use(express.json()),即使前端发对了也会收到 req.body 为 undefined
FormData 或 URLSearchParams 发送时,Content-Type 会自动设为对应类型,但它们不是 JSON —— 别混用Content-Type: text/plain 却传 JSON 字符串,属于设计缺陷,但你得适配:此时仍要 JSON.stringify,只是 header 换掉fetch 返回的 Response 对象不会自动解析 JSON。调用 response.json() 才触发解析,且它返回 Promise —— 忘记 await 或 .then() 是高频错误。
fetch('/api/user/1')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json(); // 这一步才真正解析字符串为 JS 对象
})
.then(data => console.log(data.name)) // data 是对象,不是字符串
.catch(err => console.error(err));
res.json() 在响应体不是合法 JSON 时会 reject(比如后端返回 HTML 错误页),务必加错误处理JSON.parse(res.text()):多此一举,且 res.text() 也是异步的,不如直接用 res.json()
"{...}" 带引号),那才是 JSON.parse(await res.text()) 的场景,但极少遇到虽然 JSON.parse 比 eval 安全得多,但它只保证语法安全,不校验数据结构和内容。后端字段缺失、类型错乱、注入字段(比如意外返回了 __proto__)都可能让前端逻辑崩溃。
eval('(' + jsonStr + ')') 解析 JSON —— 它执行任意代码,极度危险zod 或手写简单检查:if (typeof data.id !== 'number') {...}
token、admin)不能只靠前端判断,必须由后端鉴权 —— JSON 只是载体,不解决信任问题
责任归属。很多人卡在 res.json() 忘加 await,或 POST 时漏掉 JSON.stringify,再或者后端没配好中间件——这些地方一错,整个通信链就静默失败。