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만 제대로 안되는걸까.
원인
axios는 'data'를 query로 변환해주지 않는다고 한다. 'data'란 개발자 도구에서 봤던 dictionary를 말한다. axios에서 매개변수로 변환해주지 않으니 스프링에서는 userId와 password라는 매개변수를 못받았던 것이다!
axios.post에서 두 번째 인자가 data이다! 그래서 jquery를 써야하나 하던 와중에 다음의 글을 발견했다.
두 번째 인자를 null로 주고 세 번째 인자에 매개변수로 전달하고 싶은 내용을 넣으면 된다고 한다.
위와 같이 수정하고 테스트해보았다.
결과는 성공!!! stackoverflow의 enapupe님, github의 fireloudapp님 감사합니다. 복 받으세요.