[Trouble Shooting] 서버 에러 문제 대응 Axios Interceptor

[sgoldenbird]

🐞 문제 상황 (Problem Description)

브라우저에서 CORS 에러처럼 보이는 메시지가 반복적으로 발생했고, 새로고침을 하면 가끔 요청이 성공하는 이상한 현상이 발생했다.
개발자 도구에서는 Internal Server Error (500)가 함께 출력되었고, 처음엔 클라이언트 측 요청 문제 혹은 CORS 설정 문제라고 판단했다.

---

💻 환경 정보 (Environment)

• 브라우저: Chrome 123
• 프론트엔드 프레임워크: React 19, Vite 사용
• 배포 환경: 배포 전
• API 서버: fandom-k-api.vercel.app (외부 REST API, 수정 불가)

---

🔍 발생 원인 분석 (Investigation)

• 처음 의심한 원인: CORS 에러 → 콘솔에 Access-Control-Allow-Origin 관련 메시지가 출력되었기 때문
  하지만 CORS 설정은 서버에서 이미 와일드카드(*)로 되어 있었고,
  새로고침 시 요청이 간헐적으로 성공/실패를 반복한다는 점에서 클라이언트 문제보다는 서버 문제 가능성이 높다고 판단했다.
• 개발자 도구에서 확인된 실제 오류: 500 Internal Server Error
• 동일한 현상이 다른 팀에게도 발생한다는 사실을 확인했고 서버 측 공통 문제로 판단했다.

---

🛠 시도해본 해결 방법 (Attempts)

시도 내용	결과
❌ 서버의 CORS 설정 확인 (Access-Control-Allow-Origin: *)	문제 없음
❌ 프록시 서버로 우회 설정 (vite.config.js에서 proxy 설정)	여전히 500 에러 발생
⚠ 새로고침 반복 테스트	간헐적으로 성공, 근본 해결 안됨
✅ axios interceptor로 요청 실패 시 자동 재시도 처리	체감 성능 개선, 사용자 불편 감소, 프론트엔드 개발 생산성, 편의성 향상

---

✅ 최종 해결 방법 (Final Solution)

• 서버 이슈가 확인될 때까지 임시 대응으로 axios interceptor를 통해 요청 실패 시 자동 재시도 로직을 적용했다.
• 자동 재시도 로직은 횟수로 하지 않고 30초 동안 1초 간격으로 요청을 자동 재시도하도록 작성했다.
• 사용자 입장에서 새로고침을 반복하지 않아도 되도록 개선했다.
• 반복작업 감소로 인해 프론트 엔드 개발에서도 개발 생산성과 편의성이 향상되었다.
  

---

💡 알게 된 점 (Lessons Learned)

• CORS 에러처럼 보이는 메시지가 항상 CORS 문제는 아닐 수 있고, 실제 다른 서버 내부 에러가 발생해도 CORS 에러가 부수적으로 나타날 수 있다.
• 클라이언트 관점에서 요청이 간헐적으로 실패한다면, 네트워크 문제보다 서버 상태 불안정이나 처리량 초과를 의심해야 한다.
• axios interceptor를 통해 자동 재시도 로직을 도입함으로써, 에러 상황에서도 사용자뿐 아니라 프론트엔드 개발 과정에서도 불필요한 반복작업이 줄어들어 생산성과 편의성이 향상되었다.
• 앞으로도 사용자 경험뿐 아니라, 개발자 경험까지 고려한 코드와 환경 개선을 고민해야겠다고 느꼈다.

---

📚 래퍼런스

• https://axios-http.com/docs/interceptors