GET请求中如何将参数传入请求体而非查询参数？请求返回404错误的解决方法

这个问题我碰到过好几次，咱们一步步拆解解决：

首先得先明确你代码里导致404的核心问题：

1. URL拼接错误：你直接把参数对象和URL字符串相加，JavaScript会自动把对象转成[object Object]，最终请求的地址变成了URL[object Object]，这显然不是后端的合法接口地址，自然返回404。
2. GET请求带请求体的兼容性问题：虽然HTTP规范没明确禁止GET请求带请求体，但绝大多数服务器、框架甚至客户端（比如浏览器原生fetch）都不支持这种做法——这不符合HTTP的常规设计，GET请求本来就是用来获取资源，参数应该放在查询字符串里。

下面给你几种不同场景的解决方案：

方案1：改用POST请求（最推荐） #

如果后端允许的话，直接把请求方法改成POST，把参数放到请求体里，这是HTTP传递复杂参数的标准方式：

const fetchData = async()=>{ 
  // 先整理参数对象
  const requestBody = { 
    companyArr: ["SBI Life Insurance Company Ltd.","NTPC Ltd"], 
    secodeArr: ["NSE","NSE"], 
    startDate: "Jul 1, 2022", 
    endDate: "Jul 13, 2022" 
  };

  // 调整apiCall的参数顺序：URL、请求方法、请求体（假设你的apiCall是按这个顺序接收参数）
  let res = await apiCall("URL", "POST", requestBody); 
  console.log(res); 

  if (res.status === 200) { 
    console.log(res.data.data); 
  } 
}

方案2：必须用GET请求（后端明确支持接收请求体） #

如果后端专门配置了支持GET请求接收请求体，那首先要修正URL拼接问题，然后确保你的apiCall函数正确处理GET请求的请求体。比如如果apiCall是基于原生fetch封装的，需要这样调整：

const fetchData = async()=>{ 
  const requestBody = { 
    companyArr: ["SBI Life Insurance Company Ltd.","NTPC Ltd"], 
    secodeArr: ["NSE","NSE"], 
    startDate: "Jul 1, 2022", 
    endDate: "Jul 13, 2022" 
  };

  // 注意：不要把参数拼到URL，而是传给apiCall的请求体位置
  let res = await apiCall("URL", "GET", requestBody); 
  console.log(res); 

  if (res.status === 200) { 
    console.log(res.data.data); 
  } 
}

// 假设你的apiCall封装需要这样处理GET请求的body
async function apiCall(url, method, body) {
  const options = {
    method: method,
    headers: {
      'Content-Type': 'application/json',
    },
  };

  // GET请求带body需要明确配置
  if (body) {
    options.body = JSON.stringify(body);
  }

  const response = await fetch(url, options);
  return response.json(); // 根据你的实际返回格式调整
}

注意：这种方式风险很高，很多后端框架（比如Spring、Express）默认不会解析GET请求的请求体，必须专门配置，所以一定要先和后端确认。

方案3：用查询字符串传递GET参数（常规做法） #

如果后端只接受GET请求的查询参数，那你需要把参数对象转成合法的查询字符串：

// 工具函数：把对象转成查询字符串，支持数组参数
const objToQueryStr = (obj) => {
  return Object.keys(obj)
    .map(key => {
      if (Array.isArray(obj[key])) {
        // 处理数组：比如companyArr=xxx&companyArr=yyy
        return obj[key].map(item => `${encodeURIComponent(key)}=${encodeURIComponent(item)}`).join('&');
      }
      return `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`;
    })
    .join('&');
};

const fetchData = async()=>{ 
  const params = { 
    companyArr: ["SBI Life Insurance Company Ltd.","NTPC Ltd"], 
    secodeArr: ["NSE","NSE"], 
    startDate: "Jul 1, 2022", 
    endDate: "Jul 13, 2022" 
  };

  // 生成查询字符串并拼到URL后面
  const queryStr = objToQueryStr(params);
  let res = await apiCall(`URL?${queryStr}`, "GET", null); 
  console.log(res); 

  if (res.status === 200) { 
    console.log(res.data.data); 
  } 
}

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