Spring에서 axios post으로 보낸 요청 매개변수를 못받는 문제

결론

axios post의 두 번째 인자를 null로 주고, 세 번째 인자에 매개변수를 주어야 한다.

(아니면 jquery를 사용해도 된다. 참고: github.com/axios/axios/issues/1281)

 

문제상황과 해결 방법

백엔드(Spring boot)

 

/users/register로 오는 POST 요청을 담당하는 핸들러이다. (컨트롤러에 @RequestMapping("/users")가 붙어있는 상황이다.) User는 userId와 password라는 필드를 갖고 있어서 요청하는 쪽에서 매개변수로 userId, password를 넘겨주면 User라는 객체로 바인딩되어 핸들러에게 전달된다. 핸들러는 이 객체를 데이터베이스에 저장한다.

 

프론트(React)

 

 

결과

 

 

User에 아무것도 바인딩되지 않았다. (다시 말해, 요청에 userId, password라는 매개변수가 없었다.)

 

 

크롬에서 개발자 도구로 확인한 결과 params가 있긴 있는데 'data'라는 이름의 dictionary 안에 있었다.

 

 

포스트맨에서는 잘 동작했다.

 

 

테스트 코드도 잘 동작했다. 왜 axios의 post만 제대로 안되는걸까.

 

원인

 

https://github.com/axios/axios/issues/1281

 

axios는 'data'를 query로 변환해주지 않는다고 한다. 'data'란 개발자 도구에서 봤던 dictionary를 말한다. axios에서 매개변수로 변환해주지 않으니 스프링에서는 userId와 password라는 매개변수를 못받았던 것이다!

 

https://github.com/axios/axios#axios-api

 

axios.post에서 두 번째 인자가 data이다! 그래서 jquery를 써야하나 하던 와중에 다음의 글을 발견했다.

 

 

두 번째 인자를 null로 주고 세 번째 인자에 매개변수로 전달하고 싶은 내용을 넣으면 된다고 한다.

 

 

위와 같이 수정하고 테스트해보았다.

 

 

결과는 성공!!! stackoverflow의 enapupe님, github의 fireloudapp님 감사합니다. 복 받으세요.