[AxiosError] Request failed with status code 403

본 글은 초보개발자의 입장에서 작성된 글이며, 잘못된 설명이 포함될 가능성이 있습니다.

🙌잘못된 설명에 대한 지적이나 조언의 댓글을 환영합니다🙌

 

---

 

+ 22.04.28 오전 9시 내용 추가

어제 오후 6시 경 해당 부분을 수정하여 0.27.2 버전이 새로 릴리즈되었다. 

하지만 최신 버전을 적용했을 때 동일한 이슈가 아직도 발생된다는 사실을 확인하였으며,

안정화된 버전인 0.26.1을 계속해서 사용하기로 했다. 

 

Axios 개발자분이 0.27.0버전에서 데이터를 자동으로 처리하는 방식에 대한 내용을 해당 링크에서 확인할 수 있다고 언급해주셔서 추가해둔다. 시간될때 한번 더 확인해보고, 확실히 이해해야겠다. 

https://github.com/axios/axios#form-data

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

 

---

 

오류문구

POST http:://~~~~ 403

 

발생상황

어제 오후 3시까지만 해도 잘됐던 코드와 기능들이 오후 6시경 갑자기 동작하지 않는 에러 발생

form data를 axios.post로 넘겨주는 기능이 동작하지 않고 403 오류를 발생시킴

 

해결방안

(해결방안만 보고 싶은 분들을 위해 먼저 적어둡니다)

현재 프로젝트에는 unpkg CDN으로 Axios를 사용하는 중이었고, 현재 버전에 문제가 있어 이전 버전으로 연결시켰다.

<!-- 변경전 unpkg CDN 코드 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- 이전 버전연결을 위한 unpkg CDN 코드 -->
<script src="https://unpkg.com/axios@0.26.1/dist/axios.min.js"></script>

 

 이것저것 코드들을 많이 수정한 터라 도대체 어디에서 문제가 생긴 건지 혼란스러웠다. 커밋하기 전에 분명 테스트해보고 동작이 정상적으로 된다는 것을 확인하긴 했지만, 그때까지만 해도 내가 작성한 코드가 완전무결하다는 것에 대한 자신감이 없었기 때문에 나부터 의심해볼 수밖에 없었다. 게다가 특정한 한 페이지에서만 동작이 안 되는 줄로 알고 있어서 이전에 동작이 잘 되었던 코드로 revert 해보기도 하고, 뭐가 문제인지 코드들을 다 뜯어보고 있었는데, 다른 페이지를 작업하고 있던 동료에게도 같은 문제가 발생하는 게 아닌가..! 그래서 코드의 문제는 아니라고 판명하고 왜 이런 오류가 발생하는지를 찾아내기 위해 엄청난 구글링을 시작했다. (사실 내 코드의 문제가 아님을 깨닫기까지 장장 4-5시간을 소모한 것 같다..)

 

 코드의 문제가 아님을 깨닫고 403 Error가 언제 발생하는지, 그리고 AxiosError가 나오는 상황은 도대체 어떤 상황인지를 파악하기 위해 수없이 많은 블로그 글을 보고 또 봤다. 그래도 해결이 안 돼서 마지막 방법으로 찾은 것이 바로 Axios 공식 깃헙이었는데, 우연히 거기서 정답을 찾게 되었다. (아, 이래서 많은 개발자분들이 공식문서 보는 습관부터 들이라고 하신 거구나 하고 이해하게 되는 순간이었다.)

 

 나도 내가 왜 그런 행동을 했는지는 모르겠지만, 무의식적으로 공식 깃헙의 History를 먼저 확인해 보았다. 그럴 가능성은 희박하겠지만, 혹시나 그 사이에 버전 업데이트가 되면서 제대로 동작하던 기능들에 문제가 생긴 것은 아닌지를 가장 먼저 체크해보고 싶었던 것 같다. 커밋 이력을 살펴보니 동작이 안됐을 것으로 추정되는 시각에 새로운 버전이 업데이트되었다는 사실을 알게 됐다. 이때부터였다. 막막했던 이 403 에러의 해결의 실마리가 보이기 시작한 것이 :)

 

 그다음에는 Issue 탭을 들어가서 최근에 올라온 이슈 중 우리가 겪은 상황과 비슷한 내용이 있는지를 탐색했다. 그렇게 찾은 것이 바로 이 이슈다.

https://github.com/axios/axios/issues/4638

Axios 0.27.1 has a pretty serious problem · Issue #4638 · axios/axios

 

 읽어보니 지금 내가 겪은 상황이랑 같았다. 0.27.1버전으로 업데이트 된 후에 axios.post로 formData를 받아오는 동작이 안된다는 내용이었는데, 이 이슈 글로 인해 동작이 안됐던 문제가 내 코드로 인한 것이 아닌, axios 버전 업데이트로 인한 것임이 분명하게 밝혀져 조금은 속 시원하기도 했다. 심지어 이전 버전의 CDN을 사용하는 방법까지 하단 코멘트로 친절하게 달아놓으셔서 당장 문제의 해결이 필요한 상황에서 큰 도움이 되었다. 최신 버전의 CDN을 사용하는 코드를 변경하니 바로 해결이 됐고, 조용한 사무실 한 켠에서 동료와 이슈 해결의 기쁨을 누렸다. 어떻게 보면 오늘 하루를 통째로 이것 때문에 날린 셈인데, 해결했다는 성취감이 이렇게 클 줄이야.. 이 맛에 개발하지😋

 

 

느낀점

 막상 정리하고 보니 이렇게까지 기뻐할 문제는 아닌 것 같기도 하다만, 그래도 답이 없다고 생각했던 문제를 끈질기게 포기하지 않고 직면한 결과를 해결이라는 즐거움으로 보상받은 것 같다. 역시 세상에 답 없는 문제는 없고, 내가 겪은 문제 중 대부분은 수많은 선배 개발자가 이미 겪고 해결해낸 문제라는 것을 오늘 다시 한번 깨닫게 된 것 같다.  

 

 또, 공식문서의 필요성과 영어로 된 문서를 읽어야 하는 필요성에 대해 절실하게 느끼게 된 계기였다. 사실 공식 깃헙을 조금만 더 빨리 봤었더라면 좋았을 텐데, 본능적으로 한글로 된 자료들만 찾아보다 보니 문제를 해결하는 데에 더 많은 시간이 소요된 것 같다. 앞으로는 공식문서를 먼저 보는 습관을 들여야겠다 ( •̀ ω •́ )✧

 

ps. 403 에러 해결에 어려움을 겪고 있다고 알렸을 때, 같은 회사도 아니지만 구글링에 함께 동참해준 동료 개발자분들에게 이 자리를 빌려 감사의 마음을 전해 본다. 그럼 이만~ ο(=•ω＜=)ρ⌒☆