怎么在HTML中通过Fetch的body选项发送JSON格式的请求体数据-html教程-PHP中文网

发送json必须显式设置content-type: application/json，body需json.stringify()转字符串，get禁用body，应改用post或url参数；服务端需匹配中间件（如express的express.json）。

怎么在html中通过fetch的body选项发送json格式的请求体数据

Fetch发送JSON时必须设置`Content-Type`请求头

不手动指定Content-Type: application/json，后端大概率收不到数据或解析失败。浏览器不会自动补这个头，即使你传的是JSON.stringify()后的字符串。

常见错误现象：req.body为空（Express）、request.get_json()报错（Flask）、Nginx返回400或415。

必须显式在headers中加入'Content-Type': 'application/json'
不要依赖fetch自动推断——它不会推断body内容类型
如果后端用form-data或x-www-form-urlencoded解析器，也会静默丢弃JSON体

`body`字段只能传字符串，不能直接传对象

fetch的body选项不接受原始JavaScript对象，必须是string、FormData、Blob等可流式读取的类型。直接传{ user: 'a' }会抛出TypeError: Failed to execute 'fetch': Request with GET/HEAD method cannot have body（实际错误更可能是TypeError: Request body is not a valid type）。

用JSON.stringify({ user: 'a', id: 123 })转成字符串再赋给body
别漏掉try...catch包裹JSON.stringify()——循环引用对象会直接崩
如果对象里有undefined、function或Symbol，JSON.stringify()会静默忽略它们，可能造成数据丢失

GET请求不能带`body`，JSON数据得改用URL参数或POST

HTTP规范禁止GET请求携带请求体，尽管部分浏览器（如Chrome）允许发出去，但Node.js原生http模块、Nginx、CDN、某些代理会直接拒绝或丢弃body。想传结构化JSON，只有两个可靠选择：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

改用POST（最常用），配合Content-Type: application/json
把JSON序列化后作为URL查询参数（如?data=%7B%22user%22%3A%22a%22%7D），但受URL长度限制（通常≤2KB），且需encodeURIComponent(JSON.stringify(...))

别试图用GET + body“试试看”——它在开发环境可能偶然成功，上线后必出问题。

完整可运行示例（含错误处理）

下面这段代码覆盖了95%的JSON POST场景，包含必要头、字符串化、错误分支：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'user@example.com',
    password: 's3cr3t'
  })
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
})
.catch(err => {
  console.error('请求失败:', err.message);
});

注意：后端收到的是原始JSON字符串，不是自动解析的对象；是否需要二次JSON.parse(req.body)取决于框架（Express默认需express.json()中间件，Fastify默认自动解析）。

最容易被忽略的一点：服务端中间件顺序。比如Express里express.json()必须在fetch发起请求之前注册，否则req.body永远是undefined。