axios로 요청 실패시 크롬 콘솔에 다음과 같은 로그가 뜬다. axios가 xhr을 사용하고 있고, xhr 내부에서 로그를 남기고 있어서 그렇다고 한다.

이게 사실 굉장히 마음에 안들었다. 내 api 주소가 콘솔에 완전히 드러나게 되기 때문이다. 이렇게 되면 개발자가 보고 이 api에 호출을 겁나게 하는 공격을 할 수 있을것 같다.

결론적으로 나는 요청 실패 시 console.clear() 해서 없애기로 했다.

일단 다른 여타 웹앱을 봤을 때 이렇게 콘솔에 로그인 실패 로그가 뜨는 웹앱은 없었다. 그러니까 이런 로그가 안뜨는게 정상이 맞다는거다. 그런데 네트워크 탭을 봤을 때 그런 앱들은 다 status가 200 ok를 주고 있었다. 그것도 여간 이상하지 않을 수 없다. 서버사이드 렌더링일 경우 로그인 실패된 페이지도 볼 수 있다는 점에서 200 ok가 뜨는게 납득은 되지만, 그렇지 않을 경우 실패했는데 200이 뜨는건 너무 이상했다. 그러니까 베스트 프랙티스를 참고했지만, 나와는 다른 상황으로 보였고, 나와 같은 상황이라고 한다면 그걸 따라하고 싶지 않았다.

status를 200으로 안하고도 이 로그가 안보이게 하고 싶었다. 그런데 그 방법을 찾지는 못했다. 생각보다 서치가 안됨… 실패 로그가 뜨는게 왜 이상하냐는 말도 봤다.

내가 서치한 것 중 그나마 도움이 된 건 아래 두 글이다. 내가 이해한바는 http 클라이언트 문제가 아니고 브라우저의 기능이라는 점이었다.

글들이 추천해준 방식은 서버사이드 쪽 코드를 바꾸거나(아마 운영중인 웹앱이 이 방식을 택한거같다), 로그를 그냥 두거나, console.clear()해서 안보이게 하는 것이었다.

console.clear()가 깔끔한 방식은 아닌거같지만… 지금 내가 아는 수준에서 401 대신 200을 줘서 처리하는건 너무나 마음에 안들고 console.clear()만 해도 문제는 생기지 않을 것 같아 이 방식을 택했다.