[Axios] get 요청 시 Query Params 보내기 (에러핸들링)

프로젝트 중 axios를 통해 get 요청 시 에러가 발생했다.

request body로 데이터를 보냈더니 에러가 발생하여,

Query Params 를 통해 데이터를 전송하여 문제를 해결했다.

 

Error 세부사항

- 상황 : 클라이언트에서 서버에 get 요청을 하며 request body에 userId 정보를 전달

- 에러 : 서버에서 request body 에 있는 userId 정보를 받지 못함 (request.body는 undefined)

- UnhandledPromiseRejectionWarning: Error: WHERE parameter "userId" has invalid "undefined" value

 

 // 클라이언트 app.js에서 get 요청 코드
 
 const ToDoListHandler = () => {
    axios.get('https://localhost:4000/sendlist/todo', 
      {userId: userId}, 
      { withCredentials: true }
    )
    .then((res)=> {
      setToDoList(res.data.data)
    })
  }

 

// 서버 controller 폴더의 컨트롤러

module.exports = async (req, res) => {

    const {userId} = req.body;

    const listInfo = await ToDoList.findAll({
        where: {
            userId
        }
    })

    if(!listInfo) {
        res.status(400).send('Bad Request')
    } else {
        res.status(200).json({message: 'ok', data: listInfo})
    }

}

 

원인 및 에러 핸들링

- 원인 : axios로 get 요청 시 데이터를 request body에 담아서 전송할 수 없음

- 해결방법 : 클라이언트에서 params로 데이터를 전달고, 서버에서는 request.query 로 데이터를 받기

- 참고 링크 : https://masteringjs.io/tutorials/axios/get-query-params

 

// 클라이언트 app.js에서 get 요청 코드

  const ToDoListHandler = () => {
    axios.get('https://localhost:4000/sendlist/todo', 
      {params: {userId: userId}}, 
      { withCredentials: true }
    )
    .then((res)=> {
      setToDoList(res.data.data)
    })
  }

 

// 서버 controller 폴더의 컨트롤러

module.exports = async (req, res) => {

    const {userId} = req.query;

    const listInfo = await ToDoList.findAll({
        where: {
            userId
        }
    })

    if(!listInfo) {
        res.status(400).send('Bad Request')
    } else {
        res.status(200).json({message: 'ok', data: listInfo})
    }

}