如何在React中调用Node.js排序查询接口（Postman正常React无返回）

核心问题排查与修复 #

1. Node.js接口未返回响应 #

你的Node.js代码存在两个关键问题：一是获取数据后未向客户端发送响应，二是用const声明的result被重新赋值会触发错误。修改如下：

import User from ...
const getAllUserStatic = asyncHandler(async(req,res)=>{
     const {name, sort, field} = req.query
     const queryObject = {}
     
     if(name){
         queryObject.name = name
     }
     let result = User.find(queryObject) // 改用let支持后续重新赋值，同时传入查询条件
     if(sort){
         const sortList = sort.split(',').join(' ')
         result = result.sort(sortList)   
     }

     const users = await result
     // 新增：向客户端返回排序后的数据
     res.status(200).json({ success: true, data: users })
})

2. 跨域问题处理 #

如果Node.js服务与React项目运行在不同端口（如Node在3001、React在3000），需解决跨域问题：

• 方法一：在Node.js中配置CORS
  先安装依赖：

  npm install cors
  

  再在Node.js入口文件添加：

  const cors = require('cors')
  app.use(cors())
  

• 方法二：在React项目的package.json中添加代理

  "proxy": "http://localhost:3001" // 替换为你的Node.js服务端口
  

3. 确认React请求路径正确性 #

若未配置代理，需在axios请求中填写完整服务地址：

const {data} = await axios.get('http://localhost:3001/api/user/static?sort=name')

验证步骤 #

修改Node.js代码后重启服务，调用React的handleSort函数，查看控制台是否输出排序后的用户列表。

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