[React] [nodejs] req.body 데이터 undefined 오류 해결(FormData undefined)

Node.js와 React를 통해 프로젝트를 하던 중 오류가 발생했다. 

React와 Node.js를 활용한 고객 관리 시스템 개발 - 구름EDU

위 링크의 강의를 듣고나서 회원가입 페이지를 구현했는데, 같은 방식으로 로그인 기능을 구현하려니 오류가 발생했다.

 

기존의 오류가 발생한 코드는 아래와 같다. FormData에 userid, userpw를 추가해 post해 주는 방법을 썼다. 그러나 서버 쪽에서 정보를 받을 때 req.body 데이터가 계속 undefined로 나왔다. (ㅠㅠ)( body-parser도 썼는데 오류가 발생했었다. )

 

login = (e) => {
	e.preventDefault()
    const url = '/api/users/login';
    const formData = new FormData();
    formData.append('userid', this.state.userid);
    formData.append('userpw', this.state.userpw);

    const config = {
        headers: {
            'content-type': 'multipart/form-data' 
        }
    }
    return post(url, formData, config);
}

 

알고보니 FormData의 경우 req로 받을 수 없다고 한다. (body-parser의 경우 multipart bodies는 다룰 수 없다고 한다.)따라서 이는 multer를 이용해 req를 얻어야만 클라이언트에서 전송한 데이터를 읽을 수 있다는 것이다. 하지만 나의 경우 파일을 업로드하지 않기 때문에 굳이 multer를 안써도 될 것 같아 아래와 같이 코드를 수정했다.

 

handleFormSubmit = (e) => {
    e.preventDefault()
    axios.post('/api/users/login', 
    { userid: this.state.userid, userpw: this.state.userpw})
    .then((response) => {
        console.log(response.data)
        if(response.data.success){
            this.props.history.push('/')
        } else{
            alert(response.data.message);
        }
    })
    .catch((error) => {
        console.log(error)
    })
}

 

지금은 이런 실수는 하지 않게되었지만 완전 처음 해보는 입장이었을 때는 대체 무엇이 문제인지 알기 힘들었다.. 아래의 글 덕분에 해결할 수 있었다. (감사합니당)

https://okky.kr/article/656251?note=1849989 

OKKY | Node.js에서 FormData가 undefined인 문제 해결좀 부탁드립니다 ㅠㅠ