使用 fetch 发起 POST 请求提交 JSON 数据需设置 headers 为 {'Content-Type': 'application/json'} 并用 JSON.stringify() 将数据转为字符串作为 body，否则后端无法正确解析；需检查 res.ok 和捕获异常，常见错误包括漏设 headers、未序列化 body 或跨域配置缺失。
用 fetch 发起 POST 请求提交 JSON 数据，核心是设置正确的请求头（Content-Type: application/json）并把数据转成 JSON 字符串传给 body。
基本写法：设置 headers 和 body
JSON 数据必须先用 JSON.stringify() 转为字符串，否则后端无法正确解析。同时必须显式声明 Content-Type 为 application/json，否则浏览器默认用 text/plain 或 application/x-www-form-urlencoded，后端很可能收不到或解析失败。
-
method: 'POST'显式指定请求方法 -
headers中包含{ 'Content-Type': 'application/json' } -
body是JSON.stringify({ key: value })的结果
带错误处理的完整示例
实际开发中要检查网络是否通畅、HTTP 状态码是否成功（如 200–299），还要捕获 JSON 解析异常：
const data = { username: 'alice', age: 28 };
fetch('/api/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(json => console.log('成功:', json))
.catch(err => console.error('失败:', err.message));
常见踩坑点
这些细节出错会导致后端收不到数据或报 400 错误：
立即学习“Java免费学习笔记（深入）”；
- 漏写
headers或写错键名（比如写成content-type小写，虽然多数服务能兼容，但规范推荐首字母大写） -
body直接传对象（如body: data），没调用JSON.stringify - 后端接口要求带认证 token，但忘记在 headers 中加
Authorization - 跨域时后端未配置 CORS，导致预检请求（OPTIONS）失败
配合 async/await 更清晰
用 async/await 可以让逻辑更线性，也方便统一 try-catch：
async function submitUser(userData) {
try {
const res = await fetch('/api/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
});
if (!res.ok) throw new Error(`请求失败: ${res.status}`);
const result = await res.json();
return result;
} catch (err) {
console.error('提交失败', err);
throw err;
}
} 
