如何将前端参数传递给Node.js后端的GET请求接口且保持后端逻辑不变

问题根源 #

1. 你后端定义的是GET类型的/convertedAmount接口，仅能匹配GET请求，你前端发送POST请求时方法不匹配，无法进入该路由的处理逻辑，自然拿不到返回结果。
2. HTTP规范不推荐GET请求携带请求体，Express默认也不会解析GET请求的body，你在GET接口中直接取req.body的写法本身就无法正常拿到参数。

解决方案 #

不需要修改你后端调用RapidAPI的核心逻辑，也不需要把后端接口改成POST，仅需调整后端参数取值逻辑+修改前端请求方式即可：

1. 后端代码修改（仅1行）

把接口中从req.body取参数的逻辑，改为从req.query取（Express会自动把GET请求的查询参数解析到req.query对象中），其余代码完全保持不变：

app.get('/convertedAmount', (req, res) => {
  // 把原来的 const contentBody = req.body 替换为下面这行
  const contentBody = req.query

  // 以下调用RapidAPI的逻辑完全不用动
  const options = {
    method: 'GET',
    url: 'https://currency-converter5.p.rapidapi.com/currency/convert',
    params: {format: 'json', from: contentBody.primaryCurrency, to: 
    contentBody.secondaryCurrency, amount: contentBody.primaryCurrencyAmount},
    headers: {
      'x-rapidapi-host': process.env.RAPIDAPI_HOST,
      'x-rapidapi-key': process.env.RAPIDAPI_KEY,
    },
  }

  axios
    .request(options)
    .then((response) => {
      res.json(response.data)
    })
    .catch((error) => {
      console.error(error)
    })
})

2. 前端代码修改

改发GET请求，把参数放到params配置项中，axios会自动将参数拼接为查询字符串附加到URL后：

axios.get('/convertedAmount', {
  params: {
    primaryCurrency: 'USD',
    secondaryCurrency: 'GBP',
    primaryCurrencyAmount: 1
  }
})
.then((response) => {
  console.log(response.data);
})
.catch((error) => {
  console.log(error);
})

如果你确实完全不能修改后端代码，需要强行让GET接口读取body，首先要明确该方案存在严重的兼容问题：浏览器环境下XMLHttpRequest、fetch、axios都会自动丢弃GET请求的body，基本无法在前端正常使用，仅在服务端调用场景下可行，因此非常不推荐。

验证方式 #

修改完成后，直接在浏览器地址栏访问http://localhost:8000/convertedAmount?primaryCurrency=USD&secondaryCurrency=GBP&primaryCurrencyAmount=1，即可直接看到接口返回的转换结果。

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