React App + Express JS服务器+ Axios前端请求=服务器上的“undefined”选项参数

vdzxcuhz  于 2023-08-04  发布在  iOS
关注(0)|答案(2)|浏览(125)

我在谷歌上搜索了这个问题一遍又一遍,似乎找不到解决方案。
下面是我的前端代码:

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
    }

  });


后端的req.query和req.params都导致“undefined”。
有什么办法解决这个问题吗?
亲切问候,
澳大利亚墨尔本
这是从前端客户端请求数据时服务器上的调试输出:
frontend request, VS Code server console
我试过使用Postman,参数传递得很好,如你所见:Postman
VS Code server console

o7jaxewo

o7jaxewo1#

URL查询参数的Axios选项是params...
params是与请求一起发送的URL参数
必须是普通对象或URLSearchParams对象
参见Axios -请求配置
如果希望在req.query中接收sortColumnsortOrder参数,则需要像下面这样构造选项

axios.get("/api/blog", { params: { sortColumn, sortOrder } })

字符串
不过要提醒一句,某些版本的Axios在URL查询序列化方面有一个错误。我总是建议使用Fetch API而不是Axios。

const baseURL = process.env.REACT_APP_API_BASE_URL;
  // or "http://localhost:3001/", etc

const url = new URL("/api/blog", baseURL);
url.searchParams.append("sortColumn", sortColumn);
url.searchParams.append("sortOrder", sortOrder);

const res = await fetch(url);
const data = await res.json();


如果要使用req.params,则需要使用路由参数定义路由

router.get("/:sortColumn/:sortOrder", (req, res) => {
  const { sortColumn, sortOrder } = req.params;

  // ...
});


然后像这样发送请求

axios.get(
  `/api/blog/${
    encodeURIComponent(sortColumn)
  }/${
    encodeURIComponent(sortOrder)
  }`
)


我不会 * 推荐这种方法用于这种类型的请求。

06odsfpq

06odsfpq2#

尝试改变你的axios得到这个,请求查询应该在req.query中

axios.get(`/api/blog?sortColumn=${sortColumn}&sortOrder=${sortOrder}`);

字符串

相关问题