[트러블 슈팅] API 라우팅 경로 불일치로 인한 Cannot GET 에러 해결

1. 문제 상황 (Issue Description)

• 증상: 프론트엔드 화면에서 지하철 혼잡도 조회 시 "혼잡도 데이터를 불러오는데 실패했습니다."라는 에러 안내 문구 발생.
• 로그 확인: 브라우저 개발자 도구(F12)의 Network 탭 확인 결과, API 요청에 대해 404 Not Found 및 Cannot GET /v1/congestion/226 에러가 반환됨.
• 백엔드 상태: 백엔드 터미널에서는 에러 로그 없이 서버가 정상적으로 실행 중(Server is running on http://localhost:3001)이었으며, .env의 API 키도 정상 로드됨.

2. 원인 분석 (Root Cause Analysis)

문제의 핵심은 프론트엔드(Vite Proxy)와 백엔드(Express) 간의 API 라우팅 경로(URL) 불일치였습니다.

1. 프론트엔드 요청: fetch('/api/v1/congestion/226') 호출
2. Vite Proxy 개입: vite.config.ts의 프록시 설정에 의해 /api가 타겟 주소(http://localhost:3001)로 프록싱되면서 백엔드에는 실제로 /v1/congestion/226 경로로 요청이 전달됨.
3. 백엔드 수신 대기 상태: 하지만 백엔드의 index.ts에서는 app.use('/api/v1/congestion', congestionRoutes)로 설정되어 있어, /api가 포함된 경로만 수신 대기 중이었음.
4. 결과: 백엔드는 프록시가 변환해서 보낸 /v1/... 경로를 인식하지 못해 Cannot GET 에러를 반환함.

3. 해결 방법 (Resolution)

프록시가 전달하는 실제 주소에 맞춰 백엔드의 라우팅 경로를 수정했습니다.

[수정 전] 백엔드 index.ts

TypeScript

 

// /api가 포함되어 있어 프록시가 전달하는 주소와 맞지 않음
app.use('/api/v1/congestion', congestionRoutes);

[수정 후] 백엔드 index.ts

TypeScript

 

// 프록시 변환 후의 주소인 /v1/congestion 에 맞추어 /api 제거
app.use('/v1/congestion', congestionRoutes);

[확인 사항] 백엔드 CongestionRoutes.ts 라우터 내부에서 경로가 중복되지 않도록 상위 경로를 제외한 파라미터만 받도록 설정되어 있는지 재확인 완료.

TypeScript

 

// 정상 라우팅 설정
router.get('/:stationCode', congestionController.getCongestion);

4. 배운 점 및 회고 (Lessons Learned)

• CORS 및 Proxy 이해: 프론트엔드 개발 환경(Vite 등)에서 프록시 설정을 사용할 경우, 프론트엔드가 호출하는 URL과 백엔드가 실제로 수신하는 URL이 다를 수 있음을 인지해야 합니다.
• 에러 추적 위치: 클라이언트에서 데이터를 받아오지 못할 때는 프론트엔드 코드만 볼 것이 아니라, 브라우저 Network 탭의 Response와 백엔드 라우팅 설정을 대조해 보는 것이 가장 빠르고 확실한 디버깅 방법입니다.

 

 

 

app.use('/api/v1/congestion', congestionRoutes);

 

app.use()

내 애플리케이션에 '미들웨어(Middleware)를 등록하겠다'는 명령어

 

1. 기본 개념: 미들웨어란?

클라이언트(브라우저)에서 요청(Request)을 보내면 서버에서 응답(Response)을 하기까지 여러 단계를 거치게 됩니다. app.use()는 그 중간 단계에 특정한 작업(검사, 데이터 변환, 로그 기록 등)을 끼워 넣는 역할을 합니다.

 

---