React中GET请求传Payload报错，如何向Node.js API传递数据？

嘿，这个报错的核心原因是HTTP协议的规范限制——GET和HEAD请求是不允许携带请求体（body）的，浏览器会直接拦截这种不符合规范的请求，所以你才看到了那个TypeError。下面给你两种可行的解决思路，根据你的业务需求选择就行：

方案一：改用POST请求传递Body #

如果你的场景是提交数据（比如触发API调用Instagram接口的操作），改用POST请求是最直接的方案，因为POST请求天然支持携带请求体。

修改后的React代码 #

handleChange(e){
  const searchtag = 'hello';
  fetch('/hashtags', {
    method: 'POST', // 将请求方法改为POST
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ tag: searchtag }),
  })
  .then(response => response.json())
  .catch(error => console.error('请求出错:', error)) // 建议添加错误处理
}

修改后的Node.js代码 #

首先要确保你的Express应用已经配置了解析JSON请求体的中间件（Express 4.16+已内置，无需额外安装body-parser）：

const express = require('express');
const app = express();

// 配置解析JSON请求体的中间件
app.use(express.json());

// 将路由改为POST方法
app.post('/hashtags', (req,res) => {
  console.log(req.body); // 输出: { tag: 'hello' }
  console.log(req.body.tag); // 输出: 'hello'
  
  // 记得给前端返回响应
  res.json({ success: true, receivedTag: req.body.tag });
});

方案二：用GET请求的查询参数传递数据 #

如果你的场景更适合用GET（比如只是获取某个标签相关的资源，符合RESTful风格），可以把数据放到URL的查询参数里，而不是请求体中。

修改后的React代码 #

handleChange(e){
  const searchtag = 'hello';
  // 将参数编码后拼接到URL的查询字符串中
  const url = `/hashtags?tag=${encodeURIComponent(searchtag)}`;
  
  fetch(url, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
    },
  })
  .then(response => response.json())
  .catch(error => console.error('请求出错:', error))
}

修改后的Node.js代码 #

app.get('/hashtags', (req,res) => {
  console.log(req.query); // 输出: { tag: 'hello' }
  console.log(req.query.tag); // 输出: 'hello'
  
  res.json({ success: true, receivedTag: req.query.tag });
});

小提示 #

• 如果是提交/修改数据的场景，优先选POST；如果是查询/获取资源的场景，用查询参数的GET更符合HTTP语义。
• 不管用哪种方案，都建议在fetch中添加错误处理，避免未捕获的Promise报错。

内容的提问来源于stack exchange，提问作者Thidasa Pankaja