반응형
회원가입 유효성 검사를 하면서 Test를 위해 json형태로 파라미터를 넘겼고 실제 회원가입에서는 form형태로 전송했을 때 발생한 에러입니다.
spring에서 json을 받을 때는 contextType을 application/json;charset=utf-8로 보내야 합니다.
에러 상황
MemberTest.java
this.mockMvc.perform(post("/member").contentType(MediaType.APPLICATION_JSON)
.content(objectMapper.writeValueAsBytes(memberVo))).andDo(print()).andExpect(status().isOk());
sjgn_form.jsp
<f:form name="f" action="${pageContext.request.contextPath }/member"
method="POST" modelAttribute="memberVo">
<table>
<tr>
<td>아이디 (영문 3글자+숫자 3글자 조합)</td>
<!-- <td><input type="text" id="user_id" name="user_id" onfocus="this.value=''"/></td> -->
<td><f:input path="user_id" /></td>
<td><input type="button" value="중복확인" onclick="check_id()" />
<f:errors path="user_id" cssClass="error" /></td>
</tr>
<tr>
<td>비밀번호(6~20자리)</td>
<!-- <td><input type="password" id="password" /></td> -->
<td><f:password path="password" /> </td>
<td><f:errors path="password"
cssClass="error" /></td>
</tr>
<tr>
<td>이름</td>
<!-- <td><input type="text" id="name" /></td> -->
<td><f:input path="name" /> </td>
<td><f:errors path="name"
cssClass="error" /></td>
</tr>
<tr>
<td>email</td>
<!-- <td><input type="text" id="email" /></td> -->
<td><f:input path="email" /> </td>
<td><f:errors path="email"
cssClass="error" /></td>
</tr>
<tr>
<td>핸드폰(010-1234-1234)</td>
<!-- <td><input type="text" id="phone" /></td> -->
<td><f:input path="phone" /> </td>
<td><f:errors path="phone"
cssClass="error" /></td>
</tr>
<tr>
<td>생년월일</td>
<!-- <td><input type="date" id="birth_day" /></td> -->
<td><f:input type="date" path="birth_day" /></td>
<td></td>
</tr>
<tr>
<td>양력/읍력 사용</td>
<!-- <td><select name="solar_yn" id="solar_yn">
<option value="1">양력</option>
<option value="0">음력</option>
</select></td> -->
<td><f:select path="solar_birth_yn" id="solar_birth_yn">
<f:option value="1">양력</f:option>
<f:option value="0">음력</f:option>
</f:select></td>
</tr>
<tr>
<td>주소</td>
<!-- <td><input type="text" id="address" /></td> -->
<td><f:input path="address" /> </td>
<td><f:errors path="address"
cssClass="error" /></td>
</tr>
</table>
<input type="button" value="가입" onclick="ip_pass()">
<input type="reset" value="리셋">
<input type="button" value="취소" onclick="cancel_sign()">
<input type="hidden" id="client_id_sign" value="">
</f:form>
MemberContoller.java
@PostMapping(value = "")
public String memberInsert(Model model, @ModelAttribute("memberVo") @Valid MemberVO memberVo,
BindingResult bindingResult, RedirectAttributes rttr) {
logger.info("--------------POST member-----");
if (bindingResult.hasErrors()) {
return "member/sign_form";
}
int count = loginService.checkSignLoginId(memberVo.getUser_id());
if (count != 0) {
model.addAttribute("MSG", MessageUtils.getMessage("fail.Sign"));
return "member/sign_form";
} else {
memberService.loginAndMemberInsert(memberVo);
rttr.addFlashAttribute("MSG", MessageUtils.getMessage("success.Sign"));
return "redirect:/";
}
}
해결 방법
form 전송을 fetch로 변경하려고 했으나 스프링 유효성 검사를 위해 form 전송으로 처리했습니다.
fetch로 전송 할 경우 header에 정보를 담아주고 controller에서 @RequestBody로 받으면 됩니다.
아래를 참고하시면 됩니다.
function sign_submit() {
var user_id = document.getElementById("user_id").value;
var password = document.getElementById("password").value;
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var date = document.getElementById("birth_day").value;
var s = document.getElementById("solar_yn");
var solar_birth_yn = s.options[s.selectedIndex].value;
var address = document.getElementById("address").value;
var ip = document.getElementById("client_ip").value;
var headers = new Headers({
"accept" : "application/json; charset=utf8",
"Content-Type" : "application/json; charset=utf8"
});
var url = root_context_path() + "/member"
fetch(url, {
method : 'POST',
credentials : 'include',
mode : "same-origin",
body : JSON.stringify({
"user_id" : user_id,
"password" : password,
"name" : name,
"email" : email,
"phone" : phone,
"date" : date,
"solar_birth_yn" : solar_birth_yn,
"address" : address
}),
headers : headers
}).then(function(res) {
console.log('res', res)
return res.json();
}).then(function(v) {
console.log(v);
})
}
반응형
