포시코딩

[해결] axios GET 요청 파라미터 오류 본문

React

[해결] axios GET 요청 파라미터 오류

포시 2022. 7. 19. 20:00
728x90
function getList(){
    let session_user = JSON.parse(localStorage.getItem('session_user'));
    axios.get('http://localhost:8080/list', {
        _id: session_user._id, 
    }).then((result)=>{
        console.log(result.data);
    }).catch(()=>{
        console.log('axios 통신실패')
    })
}
app.get('/list', (req, res)=>{
    let _id = ObjectId(req.body._id);
    db.collection('group').find({ members: { $elemMatch: { _id: _id} } }).toArray().then((result)=>{
        res.send(result);
    })
})

_id: ObjectId("62cfd01aa89591c1c72027c0") 와 같은 형태의 데이터를 

axios 로 GET 요청을 했는데 

전달되는 과정에서 파라미터 값이 이상해지는거 같다. 

중간중간 값들을 출력해보니 req.body 는 아예 비어있고 

이상하게 req.body._id 는 전혀 다른 값이 나오고있었다. (이건 ObjectId() 를 적용시켜서 빈 값에 대해 변경된 값인거 같음)

 

/*

물론 둘다 POST 요청으로 변경하면 정상적으로 작동하지만 

단순히 리스트를 뽑아오는 기능이기 때문에 GET 요청을 쓰는게 맞다고 생각한다. 

GET 요청일때는 axios.get(주소, {파라미터}) 가 아닌건지.. 

*/

 

 

해결완료

위 예상이 맞았다. 

axios GET 요청을 할 때는 파라미터를 아래와 같이 보낸다. 

    function getList(){
        let session_user = JSON.parse(localStorage.getItem('session_user'));
        axios.get('http://localhost:8080/list', {
            params: {
                _id: session_user._id 
            }
        }).then((result)=>{
            console.log(result.data);
        }).catch(()=>{
            console.log('axios 통신실패')
        })
    }

params 라고 명시를 해주며 중괄호 {} 로 묶어줘야한다. 

그리고 데이터를 받는곳에선 request.query 를 통해 받아줘야한다. 

 

 

* 혹시 body-parser 를 사용하면 body 로 받아지지 않을까 했지만 되지 않았음

app.use(express.urlencoded({extended: true}))

 

 

최종적으로 아래와 같이 nodejs 쪽에서 받아준 후 정상적으로 받으려던 group 리스트를 받을 수 있었다. 

app.get('/list', (req, res)=>{
    let _id = ObjectId(req.query._id);
    db.collection('group').find({ members: { $elemMatch: { _id: _id} } }).toArray().then((result)=>{
        res.send(result);
    })
})

 

728x90