JSP + MVC2 환경에서 AJAX 404 오류 해결

jsp페이지에서 비밀번호 검증을 위해 fetch로 요청을 보냈다.

fetch('/mypage-info.mypage', 
{ method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
body: new URLSearchParams({ password: oldPassword }) });

그런데 브라우저 콘솔에서 HTTP 상태 404 – 찾을 수 없음 오류가 발생하였다.

 

원인을 분석해보니 브라우저에 열려있는 uri와 실제 요청 uri가 일치하지 않았다.

요청 uri과 서블릿 매핑이 일치하지 않는 상황이다.

http://localhost:9000/personal-buddy/mypage/mypage-Info.jsp

 

fetch요청은 루트(/) 기준이기 때문에 실제 요청은 이렇게 나간다.

http://localhost:9000/mypage-info.mypage

 

해결 방법

fetch('/personal-buddy/mypage-info.mypage', 
{ method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
body: new URLSearchParams({ password: oldPassword }) });

 

context path를 추가하면 잘 작동한다.

context path는 서버 주소를 제외한 앱 애플리케이션 최상위 경로를 의미한다.

const contextPath = window.location.pathname.split("/")[1];
fetch(`/${contextPath}/mypage-info.mypage`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({ password: oldPassword })
});

또는 동적으로 넣어주는 방법도 있다.