[TroubleShooting] Vercel 배포 후 API 요청 시 에러 발생

💥문제 요약 (Problem)

팀 프로젝트 배포 후,
배포 주소로 들어갔을 때 API 요청에서 ERR_BAD_REQUEST 에러가 발생했다.

request url은 다음과 같다.

https://{프로젝트}.vercel.app/tourapihttps:/apis.data.go.kr/B...

🔍 원인 분석 (Root Cause)

.env 파일에 정의한 공공데이터 API의 BASE_URL이 Axios baseURL 과 잘못 결합되며,
의도치 않게 상대 경로로 처리 되어 잘못된 URL로 요청되었다.

🚫 기존 설정

• .env

  VITE_OPEN_API_BASE_URL = /B551011/KorService1

• client.ts

  baseURL: `/tourapi${import.meta.env.VITE_OPEN_API_BASE_URL}`

👀 결과

/tourapihttps:/apis.data.go.kr/B551011/KorService1...

• 이로 인해 브라우저가 https://{프로젝트}.vercel.app/tourapi... 형식의 잘못된 URL로 요청을 보냈고,
  404 Not Found 혹은 ERR_BAD_REQUEST가 발생했다.

💡 해결 방법 (Solution)

1. .env 수정

   VITE_OPEN_API_BASE_URL=https://apis.data.go.kr/B551011/KorService1

2. Axios 설정 수정

   baseURL: import.meta.env.VITE_OPEN_API_BASE_URL

✅ 결과

API 요청 URL이 정상적으로 구성되어, Vercel 배포 환경에서도 공공데이터 API 호출이 성공적으로 작동했다.

• Axios baseURL은 절대경로를 사용해야 Vercel 등 배포 환경에서 안정적이다.
• .env로 불러오는 URL에 http:// 또는 https:// 여부를 항상 확인할 것.
• baseURL + url 조합 시, 상대 경로가 어떻게 합쳐지는지 브라우저에서 실제 요청 경로를 꼭 확인할 것.