Imgur 서버에 업로드가 안되는 문제 403 Forbidden

마주한 문제: Imgur 서버에 이미지 업로드가 갑자기 안 될 때의 디버깅 과정

코드를 수정하며 건드리지도 않은 로직이 갑자기 수행이 안 될 때,
제 경우에는 이미지 업로드 시 403 에러가 나타나며 갑자기 작동하지 않게 된 상황에서 디버깅하는 과정을 정리합니다.

1. 문제 발견: 갑자기 이미지 업로드가 작동하지 않음

프로젝트를 진행하던 중,  이미지 업로드가 안되는 문제가 발생했습니다.

이미지 업로드 로직은 모듈화하여 수정한 적이 없기 때문에 로직 외의 영역에서 원인을 파악해야 했습니다.

2. 원인 찾기(1): Imgur API App 재발급 해보기 

'Forbidden' 오류는 요청을 받았으나 거절당했다는 의미이기 때문에, 새롭게 imgur app을 발급부터 해보았습니다.

 

callback url은 이전에는 tistory였기 때문에 이것이 문제가 될 수 있는가 싶었기 때문입니다.

전에도 문제가 없었지만 갑자기 정책 변경으로 imgur가 cors를 강화했다든가 하는 나름의 추측이었습니다.
사실 전혀 상관은 없었지만 말입니다.

 

vercel로 주소를 바꾸어 재발급 해보았지만 여전히 안됩니다.

3. 원인찾기(2): Netword 탭 확인

 

network 탭을 열고 뭐가 문제지... origin과 referer도 일치하는데... 하면서 둘러보다가
Authorization 부분에 Client-Id 뒷부분이 Undefined 값을 받고 있는 것을 확인할 수 있었습니다.

Forbidden 오류를 유발한 요청에서 Client-Id가 'undefined'로 전송되었다는 것이 원인임을 확신할 수 있었고 바로 조치에 들어갔습니다.

4. 원인 발견: 환경 변수 수정 오류

Client-Id가 'undefined'로 전송된 이유는 환경 변수의 수정 과정에서 NEXT_PUBLIC을 제거했기 때문이었습니다.

 

기존에는 개발 단계에서 접근에 용이하도록  NEXT_PUBLIC으로 사용하다가,

배포 단계에서 보안을 강화하기 위해 NEXT_PUBLIC를 제거했더니

클라이언트 컴포넌트에서 사용되던 해당 변수에 접근할 수 없어서 fetch의 header에 undefined를 전송하고 있었습니다.

5. 수정 과정: 환경 변수 복구

환경 변수를 서버 컴포넌트에서 클라이언트 컴포넌트에 props로 전달하여 이 문제를 간단히 해결했습니다.

환경 변수를 올바르게 설정하고, 다시 배포를 하자 이미지 업로드가 정상 작동되었습니다.

6. 성장과 배운 점

이전 같으면 network 탭을 볼 생각도 못하고, 구글에 이거 왜 403인가요 ㅜㅜ? 라는 검색어를 입력하고 있었겠지만,

 

이번엔 이렇게 단시간에 문제를 해결할 수 있게 된 것도 경험이 쌓이고 있다는 증거겠지요.

Network 탭을 보고 문제를 디버깅하라는 말을 예전에는 전혀 이해를 못했었거든요.

 

컴포넌트 간의 결속력을 낮추기 위해서 기능을 쪼개고 쪼개어 사용하다보니 depth가 깊어졌습니다.

props 전달할 것들이 많아지다보니 어느 컴포넌트에 무엇을 전달하고 있는지 파악도 힘들어졌구요.

 

그래서 다음번 리팩토링에서는 jotai를 적용해 props drilling 문제를 완화시켜 보기로 했습니다.