React使用fetch发送GET请求时如何传递request body参数？

DevOps 小满

2026-9-23

问题解决方案

报错的核心原因是浏览器的Fetch API严格遵循HTTP规范与WHATWG Fetch标准，明确禁止GET/HEAD类型的请求携带请求体，因此会直接抛出异常。Postman作为桌面调试工具没有遵循该限制，同时Express后端也支持读取GET请求的body，才会出现Postman测试正常、前端调用失败的情况。

方案1：改用POST请求（最推荐，无长度限制）

这是最合规的解决方案，不存在参数长度限制，前后端改造成本极低。

前端React代码修改：

// 注意body需要序列化为JSON字符串，同时指定Content-Type头
let result = await fetch("http://localhost:8080/autocomplete",{
  method: 'POST',
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "text": "something new"
  }) 
});

console.log(await result.json())

后端Express代码修改：

确保已经注册JSON解析中间件，需放在路由定义之前：

app.use(express.json())

将原autocomplete接口的路由方法从app.get改为app.post：

// 从 app.get('/autocomplete', (req, res) => { 改为
app.post('/autocomplete', (req, res) => {
  // 原有逻辑不变，依然可以通过req.body读取参数
  console.log(req.body.text)
})

方案2：坚持使用GET请求的处理方式

如果业务逻辑必须使用GET请求，只能将参数拼接至URL查询字符串中：

const params = new URLSearchParams({
  text: "something new"
})
let result = await fetch(`http://localhost:8080/autocomplete?${params.toString()}`,{
  method: 'GET'
});