Next.js中GET请求携带Body调用API报错的解决方法

我有一个Next.js应用，需要通过GET请求调用API并携带Body（该API要求传入此数据）。以下是部分代码：

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
  "ids": [
    94751,
    94750,
    89767
  ]
});

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://api.mysite.com/cars/compare", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

这段代码由Postman生成，在Postman中可正常运行，但复制到Next.js应用后出现报错：you can not send body to HEAD/GET request with fetch request（类似内容）。请问该如何解决？是否必须这么做？

• 差异原因
  HTTP规范没有完全禁止GET请求带Body，但浏览器端的fetch API做了严格限制，直接拒绝这类请求；而Postman作为调试工具不受这个约束，所以能正常运行。

• 优先方案：改用POST请求
  如果目标API支持，把请求方法改成POST是最符合HTTP规范的做法，修改后的代码如下：

  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  
  var raw = JSON.stringify({
    "ids": [
      94751,
      94750,
      89767
    ]
  });
  
  var requestOptions = {
    method: 'POST', // 修改为POST方法
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  };
  
  fetch("https://api.mysite.com/cars/compare", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
  

• 强制用GET的替代方案：服务器端转发
  如果API必须要求GET请求带Body，只能绕开浏览器限制，在Next.js的服务器端环境发起请求（比如API路由、服务器组件、Server Action），因为Node.js环境的fetch没有禁止GET带Body的限制。

  示例：创建一个内部API路由pages/api/fetch-cars.js

  export default async function handler(req, res) {
    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
  
    const raw = JSON.stringify({
      "ids": [
        94751,
        94750,
        89767
      ]
    });
  
    const requestOptions = {
      method: 'GET',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };
  
    try {
      const response = await fetch("https://api.mysite.com/cars/compare", requestOptions);
      const result = await response.text();
      res.status(200).send(result);
    } catch (error) {
      res.status(500).send(`error: ${error}`);
    }
  }
  

  然后在前端组件中调用这个内部路由：

  fetch("/api/fetch-cars")
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
  

• 是否必须这么做？
  如果API确实强制要求GET带Body，那只能通过服务器端转发实现；如果可以协调修改API，优先改成POST请求，这是更标准的HTTP用法。

内容的提问来源于stack exchange，提问作者Amin Soraya