React+Express+Axios请求：服务端无法获取请求参数求助

问题情况 #

多次搜索该问题仍未找到解决方案：前端通过Axios发送带排序参数的GET请求，后端Node.js接口中req.query和req.params都拿不到参数，但用Postman测试时参数能正常传递。

前端代码 #

export const getBlog = (sortColumn, sortOrder) => async dispatch => {
  
 console.log("blogActions.js => getBlog() executed.");
 console.log("sortColumn = " + sortColumn);
 console.log("sortOrder = " + sortOrder);

 let options = {
            order: [sortColumn, sortOrder]
            };
            

  try{
  // call the api. Get all our feedback from our endpoint.
  const res = await axios.get('/api/blog', options

    
  /*
  {
    params: {
      sortColumn: "Heading", 
      sortOrder: "ASC"
        }
    } */
  );

后端代码 #

router.get('/', async (req, res) => {
    console.log('/api/blog - get');
    
    // Return all blog.
    // We need to query our database to get our data.
    // We will do this by using the findAll() function, to get all the feedback in the feedbacks table.
    // Note: Remember if we use await, we need an async before(req, res).

    console.log("req.query = " + req.query);
    console.log("req.params = " + req.params);
    //const { sortColumn, sortOrder} = req.params;
    const { sortColumn, sortOrder} = req.query;
    console.log(sortColumn);
    console.log(sortOrder);


    try{
    const list = await Blog.findAll(
      
      /*
      {
      order: [[sequelize.col(sortColumn)]]
      } 
    */
    );

    // send the list back to the client.
    res.send(list);
    }
    catch(e)
    {
        console.log(e); // error
    }

  });

解决方法 #

问题出在Axios GET请求的参数传递方式上：Axios的GET请求第二个参数是配置对象，其中只有params属性里的内容才会被自动转化为URL查询字符串，传给后端的req.query。你当前直接传了order字段，Axios不会识别这个字段为查询参数。

修改前端代码 #

把排序参数放到params字段里：

export const getBlog = (sortColumn, sortOrder) => async dispatch => {
  
 console.log("blogActions.js => getBlog() executed.");
 console.log("sortColumn = " + sortColumn);
 console.log("sortOrder = " + sortOrder);

 // 修改options，将参数放在params中
 let options = {
    params: {
      sortColumn: sortColumn,
      sortOrder: sortOrder
    }
 };
            

  try{
  const res = await axios.get('/api/blog', options);
  // 后续逻辑...
  } catch(err) {
    // 错误处理
  }

后端补充排序逻辑（可选） #

如果需要根据参数实现排序，解开你注释的findAll配置即可：

const list = await Blog.findAll({
  order: [[sequelize.col(sortColumn), sortOrder]]
});

这样修改后，后端就能通过req.query拿到sortColumn和sortOrder参数了。

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