[axios] 데이터 통신시 갑자기 request에 문제가 생기는 경우

발단

현재 팝업창을 어드민에서 게시글과 이미지를 서버로 전송하는 형식으로 구현하고 있는데,

테스트 도중 jwt 미들웨어에서 유효하지 않는 토큰으로 인식하는 문제가 생겼다. 

 

건드린게 없는데..갑자기?

오류가 난 곳을 확인해보면 헤더의 토큰을 확인하여 accessToken을 파싱하는 로직에서 req 자체를 못받아오는건 아닌데, req.headers를 확인해보니 쿠키부분만 빠져있었다. 그래서 쿠키 자체를 읽어오지 못해 undefined로 확인되며 오류를 반환하고 있었다. 

 

 

서버로직을 건드린 것도 아니고,, 아직 게시글 구현하면서 전송과정을 테스트하고 있는 것이라 통신하는데 있어서 문제될게 없기도 하고 문제가 될 것이였으면 진작 로그인하는 과정이나 별도의 권한을 부여받는 로직을 건드리고 있는 것이라면 모르겠는데 아무리 생각해도 연관성이 없어보였다. 

 

과정 - 해결

그래서 권한관련된 다른 부분들을 작동시켜보았는데, 전부 정상적으로 작동했다. 헤더만 안나오니까 양측 cors 설정의 문제인가 싶어서 특정 지점의 withCredentials true 가 누락되었나 싶어서 확인하다가 문제점을 발견했다. 내가 게시글 업로드를 디버깅하면서 axios의 두번째 인자로 formData를 받고, formData를 확인하기 위해 바로 다음 매개변수로 console.log를 하여 3번째 매개변수가 config로 들어가야 하는데 그렇지 못해서 withCredentials 설정이 누락된 것이다. 

 

axios.post(url,
	  formData,{
      withCredentials: true   // << 3번째 인자 자리에 console.log()로 디버깅하고 그 다음 인자로 withCredentials를 입력하면서 누락..
      }
      )

 

코멘트

별 것 아니지만, 메서드든 라이브러리든 뭐든간에 매개변수나 프로퍼티, 타입 등 이해하지 않고 쓰면 오류가 나도 정확한 진단이 잘 안되는 것을 알았다. 아무래도 node.js를 하면서 서버에 먼저 관심을 기울이다보니 클라이언트쪽에는 간단한 axios정도만 익숙하게 다루고 있는 상황인데, 이번에 프론트쪽도 같이 구현하면서 자세히 들여다봐야겠다.