vue랑 스프링부트 연동하는데 스프링에서 null로 받는 에러

vue에서 회원가입을 하면 스프링에서 받아서 DB에 저장하는 과정이었다.

 

registUser() {
      if (
        (this.user_id === "" ||
          this.user_pass === "" ||
          this.user_name === "" ||
          this.user_age === "" ||
          this.user_phone_number === "",
        this.user_athletic_career === "")
      ) {
        alert("모든 내용을 입력해주세요");
      } else {
        const user = {
          user_id: this.user_id,
          user_pass: this.user_pass,
          user_name: this.user_name,
          user_age: this.user_age,
          user_phone_number: this.user_phone_number,
          user_athletic_career: this.user_athletic_career,
        };

        this.$store.dispatch("registUser", user);
      }
    },

이렇게 요청이 들어오면 유저 객체를 만들어서 actions로 보내준다.

 

registUser({ commit }, user) {
      console.log(user);
      axios
        .post(`http://localhost:9999/user/signup`, user, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then(() => {
          alert(`가입에 성공하셨습니다. 
                로그인을 부탁드립니다.`);
          commit("CREATE_USER", user);
        })
        .catch((err) => {
          console.log(err);
          alert("가입에 실패하셨습니다.");
        });
    },

의도하는 바는 axios를 이용해서 해당 url로 요청을 보내는데 user를 같이 보냈다.

이론상 문제가 전혀 없고

 

// 회원가입 진행
	@PostMapping("/signup")
	@ApiOperation(value = "회원가입")
	public ResponseEntity<?> userRegist(@RequestBody User user) {
		System.out.println(user);
		int result = uService.regist(user); // 해당 유저의 정보를 저장(트랜잭션 처리 해서 int로 반환)
		if (result == 0) { // 0이면 실패
			return new ResponseEntity<>("FAIL", HttpStatus.BAD_REQUEST);
		} else { // 아니면 성공
			return new ResponseEntity<>("OK", HttpStatus.OK);
		}
	}

스프링에서도 해당 요청을 받기는 했으나 user를 출력하면 전부 null값이 들어오는 상황이 발생했다.

 

 

처음에 변수명도 다 체크하고 이것저것 시도하면서 3시간정도 소비했는데

 

registUser({ commit }, user) {
      console.log(user);
      axios({
        url: "http://localhost:9999/user/signup",
        method: "POST",
        params: user,
      })
        .then(() => {
          alert(`가입에 성공하셨습니다. 
                로그인을 부탁드립니다.`);
          commit("CREATE_USER", user);
        })
        .catch((err) => {
          console.log(err);
          alert("가입에 실패하셨습니다.");
        });
    },

수업에서 배웠던 방식이 생각나서 이렇게 보냈더니 정상적으로 처리가 되더라.... 

 

대충 찾아보니 axios에서 params는 GET, POST, PUT, UPDATE 전부 사용하는데

GET방식에서는 params에 들어가는 객체들이 쿼리로 들어간다.

 

나머지에서 params를 사용하면 http body에 담겨서 전송이 된다.

 

앞으로 이 방법을 애용해야겠다.