[JS/오류해결] POST request status가 canceled일 때

문제 상황

---

회원가입 페이지에서 이메일과 비밀번호를 작성하고 회원가입 버튼을 클릭했을 때 크롬에서 response를 받지 못하는 문제점이 있었다. 

이메일과 비밀번호는 input으로 작성되었고, 회원가입 버튼은 button으로 작성했다. 그리고 3개의 HTML 엘리먼트는 form으로 감싸주었다.

Status가 canceled인 경우

 

response를 받지 못하는 이슈를 확인하기 위해, 개발자 도구의 network 탭을 확인해봤다. 여기서 status가 canceled인 것을 확인할 수 있었다.

참고로 postman에서는 통신이 잘 되는 것을 확인한 상태이다. 

 

 

 

해결방법

---

이유는 form 태그 안에서 만든 회원가입 button 때문이였다. 

<form> 안의 <button>은 default 속성으로 submit 타입을 갖고 있다. 그래서 버튼을 누를 때마다 POST request가 2번씩 보내지게 되어 크롬에서 이를 차단(canceled)한 것이였다.

 

결과적으로, button에 type="button" 속성을 주면 문제가 해결된다!

출처: W3C

 

+  위의 해결 방법 말고, form에는 onSubmit 이벤트가 있기 때문에 그걸 사용하면 된다. 

 

 

참고자료

---

• W3C

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖

반응형