[자바스크립트] contextPath 확인하기/ axios 요청 시 "/"유무 차이점 알아보기

박람회를 앞두고 마지막 시연을 하는데 갑자기 잘 되던 기능이 안되는 현상이 발생했다.

개발서버와 데모서버가 있었고, 개발 서버에서는 잘 되는데 데모서버에서는 안되고,

해당 기능과 관련된 소스의 마지막 커밋과 푸쉬를 한달도 전에 했기 때문에 이해가 안되는 상황이었다.

 

심지어 데모에서는 어제까지만 해도 분명히 되었다!

그래서 차이점이 뭔지 보니..데모에서 갑자기 url에 view가 붙는것이 확인이 되었다.

나는 view를 붙인 적이 없는데..?

좌 - 개발서버 / 우 - 데모서버

 

문제는 뭐였을까?

axios로 get 요청을 하는데 아래처럼 앞에 슬래시('/') 를 붙여주여야 루트 경로에서부터 URL을 생성하는데,

const response = await axios.get(`/vdo/contents/file/list/1000002`, {params : {approveFlag : "Y"});

아래처럼 슬래시를 빼고 코드를 작성했다.

const response = await axios.get(`vdo/contents/file/list/1000002`, {params : {approveFlag : "Y"});

슬래시가 없다면 현재 위치에서 상대 경로로 URL을 생성한다. 현재 페이지의 URL에 '/vdo/contents/file/list/1000002' 를 추가해서 데모서버 처럼 갑자기 앞에 /view가 붙어 최종 URL 이 /view/vdo/contents/file/list/1000002가 된것이다.😥

 

따라서 코드를 슬래시를 붙인 아래 처럼 수정을 했고, 정상 작동하는 것을 확인했다.

const response = await axios.get(`/vdo/contents/file/list/1000002`, {params : {approveFlag : "Y"});