React中如何将axios获取的数据传给Node.js后端

1. 先补全Node.js后端的必要配置 #

你当前的路由无法正常拿到前端传递的数据，核心原因是Express默认不会解析POST请求的请求体，需要先加对应的解析中间件，同时路由处理完要给前端返回响应，避免请求挂起超时。
首先在所有路由定义的前面，加上内置中间件（Express 4.16+版本自带，不需要额外装包）：

// 注意：这两行必须写在所有app.post/app.get等路由定义之前
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

然后修改你的/saveDiseaseDetails路由逻辑：

app.post('/saveDiseaseDetails' , (req , res) => {
  // req.body就是前端传过来的完整数据，直接打印即可
  console.log("接收到的第三方接口返回数据：", req.body)
  // 给前端返回成功响应
  res.send({ status: 'success' })
})

如果本地开发前后端端口不一致存在跨域问题，额外加个cors处理就行：

• 先执行npm i cors安装依赖
• 在路由前加上app.use(require('cors')())

2. 修改React端的axios请求逻辑 #

你只需要在拿到plant.id第三方接口的返回结果后，再发起一次POST请求，把拿到的数据转发到你自己的Node服务接口即可，示例代码如下：

axios.post("https://api.plant.id/v2/identify", data)
  .then(async ({ data: plantResult }) => {
    console.log("第三方plant.id接口返回成功", plantResult)
    // 将拿到的返回数据发送到自有后端接口
    const saveResult = await axios.post("http://localhost:你的Node服务端口/saveDiseaseDetails", plantResult)
    console.log("数据已成功发送到自有后端", saveResult.data)
  })
  .catch(err => {
    // 加错误捕获方便定位问题
    console.error("请求异常：", err)
  })

如果你已经在React项目的package.json里配置了proxy代理指向你的Node服务地址，请求地址可以简写为/saveDiseaseDetails，不需要写全域名和端口。

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