使用fetch API发送带body的GET请求报错如何解决

安全阿岳

2026-9-2

问题原因

触发这个报错的核心是浏览器Fetch API的规范限制：

根据WHATWG官方Fetch标准，GET、HEAD方法的请求禁止携带请求体（body），Chrome、Safari等所有主流浏览器的Fetch实现都严格执行了该校验规则，一旦检测到GET请求配置了body属性，就会直接抛出TypeError中断请求。
Postman作为独立的接口调试工具，没有遵循浏览器侧的这一规范限制，允许用户给GET请求附加请求体，因此会出现Postman调试正常、浏览器运行报错的差异。
需要额外注意：即使部分服务端框架、HTTP客户端可以解析GET请求携带的body，这个行为本身没有统一规范保障，链路中的网关、代理、CDN等中间节点都可能直接丢弃GET请求的body内容，生产环境使用存在极大兼容性风险。

解决方案

根据实际场景选择对应处理方式即可：

方案1（推荐）：遵循HTTP规范调整参数传递方式
如果接口确定使用GET方法，就不要将参数放在请求体中，常规传参有两种合规选择：
1. 将参数转换为查询字符串拼接到URL后传递，适配普通GET接口场景，参考代码：
```
const reqParams = new URLSearchParams({
  a: 1,
  story: document.getElementsByTagName("input")[0].value
})
fetch(`http://www.localhost:3000/get-data?${reqParams.toString()}`, {
  method: 'GET',
  headers: {
    'Accept': 'application/json'
  }
})
```
注意原代码中Content-Type: application/json请求头需要移除，GET请求无请求体，不需要该头。
2. 如果传递的参数长度较长、包含敏感信息不适合放在URL中，和后端协商将接口请求方法改为POST，参数继续放在JSON格式的请求体中传递，这也是更合理的接口设计方式，参考代码：
```
fetch('http://www.localhost:3000/get-data', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    a: 1,
    story: document.getElementsByTagName("input")[0].value
  })
})
```
方案2（极不推荐）：特殊场景下绕过Fetch限制
如果完全无法调整接口设计、必须用GET请求携带body，可放弃使用原生Fetch，改用XMLHttpRequest发起请求，XHR未对GET请求带body做强校验，部分环境下可以正常发起请求。但该方式存在中间节点丢弃body、不同浏览器表现不一致的兼容风险，非极端情况不要使用。

内容的提问来源于stack exchange，提问作者Xavi Font