HTML中如何用Fetch发送POST请求

这篇文章深入解析了HTML中使用Fetch发送POST请求的常见陷阱与最佳实践，重点揭示了Content-Type设置的必要性（如JSON需手动指定application/json、表单数据可依赖URLSearchParams自动设置、文件上传必须用FormData且禁用手动设Content-Type）、body参数的合法格式（对象必须序列化，不能直接传）、以及POST成功却收不到数据的三大元凶——CORS配置缺失、前后端数据格式不匹配、以及异步处理疏漏（如未await或忘记.json()），同时还厘清了credentials策略对认证的影响。掌握这些细节，才能真正让前端请求稳稳抵达后端逻辑，告别“请求发出去了却石沉大海”的调试困境。

Fetch POST 请求必须设置 Content-Type 吗？

不是必须，但绝大多数情况下要设。不设时浏览器默认用 text/plain，而后端（如 Express、Django、Spring Boot）通常只解析 application/json 或 application/x-www-form-urlencoded，结果就是后端收不到 req.body，日志里看到空对象或 400 错误。

• 如果传 JSON 数据，务必手动加 headers: { 'Content-Type': 'application/json' }
• 如果传表单数据（类似传统
  ），用 new URLSearchParams({a:1,b:2})，此时可不设 Content-Type，Fetch 会自动设为 application/x-www-form-urlencoded
• 上传文件要用 FormData，此时绝不能手动设 Content-Type，否则浏览器会删掉 boundary，导致后端无法解析

fetch() 的 body 参数能直接传对象吗？

不能。JavaScript 对象不是合法的请求体，会报错 TypeError: Request with GET/HEAD method cannot have body（错误提示可能误导，实际是 body 类型不合法）。

• 正确做法：JSON 数据先 JSON.stringify({name: "Alice", age: 30})，再作为 body 传入
• FormData 实例可直接传，例如 body: new FormData(formElement) 或 body: fd（fd.append('file', input.files[0])）
• URLSearchParams 也直接传：body: new URLSearchParams({k: 'v'})

POST 成功但后端收不到数据，常见原因有哪些？

这是最常卡住的地方，往往和「看起来发出去了」但服务端没反应有关：

• 后端没开 CORS，浏览器控制台出现 Access to fetch at '...' from origin 'http://localhost:3000' has been blocked by CORS policy —— 此时请求根本没到后端，需后端配 Access-Control-Allow-Origin
• 前端 Content-Type 和 body 格式不匹配：比如设了 application/json 却传了 URLSearchParams，后端 JSON 解析器会失败
• 忘了 await 或漏了 .json()，导致你以为“发成功了”，其实只是 fetch() 返回了 Promise，还没真正拿到响应
• 使用 FormData 时，文件字段值为 null 或 undefined，某些浏览器（如 Safari）会静默丢弃整个字段，建议发送前做 fd.has('file') 检查

要不要在 Fetch POST 中手动加 credentials？

要看你的场景是否涉及登录态：

• 默认 credentials: 'same-origin'，即同域请求带 cookie；跨域不带
• 如果后端接口需要 session 或 JWT cookie 认证，且部署在不同域名（如前端 http://localhost:5173，后端 http://api.example.com），必须显式写 credentials: 'include'
• 同时后端必须返回 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin 不能是通配符 *，得写具体域名
• 如果用 token 放在 Authorization header 里，就不用动 credentials，token 本身不受 CORS credential 策略限制

fetch 的 POST 看似简单，但每个参数组合都对应不同的服务端预期，错一个就进不了后端逻辑——尤其是 Content-Type、body 序列化方式、credentials 这三项，经常相互牵制。

今天关于《HTML中如何用Fetch发送POST请求》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！