HTML中如何使用Fetch发送POST请求-html教程-PHP中文网

不是必须，但绝大多数情况下要设；不设时浏览器默认用text/plain，后端通常只解析application/json或application/x-www-form-urlencoded，导致req.body为空或400错误。

html中如何使用fetch发送post请求

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' }
如果传表单数据（类似传统 <form></form>），用 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 成功但后端收不到数据，常见原因有哪些？

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

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

后端没开 CORS，浏览器控制台出现 Access to fetch at '...' from origin '@#@#@#@#@#@#@#@#@#@0' 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 认证，且部署在不同域名（如前端 @#@#@#@#@#@#@#@#@#@1，后端 @#@#@#@#@#@#@#@#@#@2），必须显式写 credentials: 'include'
同时后端必须返回 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin 不能是通配符 *，得写具体域名
如果用 token 放在 Authorization header 里，就不用动 credentials，token 本身不受 CORS credential 策略限制