배포된 클라이언트가 localhost API 주소를 호출함
AI가 생성한 fetch·axios 주소가 개발용 localhost로 고정되어 운영 브라우저에서 API를 호출하지 못하는지 확인합니다.
빠른 답변
- 우선 확인할 원인
- 브라우저가 실행되는 위치와 API가 공개된 주소를 구분하고, 환경별 공개 URL을 빌드·런타임 설정으로 관리해야 합니다.
- 먼저 확인할 항목
- 프로덕션 번들과 네트워크 요청에 localhost·127.0.0.1·개발 포트가 포함되는지 확인합니다.
- 적용 범위
- 현재 증상과 본문에 적은 관찰 조건이 함께 확인된 경우문맥: 바이브 코딩
- 출처
- MDN
- 출처 확인일
- 2026-08-04
- 최종 검토
- 2026-08-04
- 수정일
- 2026-08-04
- 정정 이력
- 2026-07-29 이후 기록 없음
현재 증상
- API 오류
- 빌드 성공, 배포 실패
- 설정 누락
먼저 확인할 항목
프로덕션 번들과 네트워크 요청에 localhost·127.0.0.1·개발 포트가 포함되는지 확인합니다.
브라우저에서 localhost가 사용자의 컴퓨터를 가리킨다는 점을 고려해 요청 대상을 기록합니다.
API base URL이 환경 변수·상대 경로·프록시 중 어떤 방식으로 정해지는지 확인합니다.
운영 URL에서 CORS·HTTPS·경로가 함께 맞는지 확인합니다.
피해야 할 조치
주의
- 운영 DNS를 로컬 주소로 바꾸지 않습니다.
- CORS 전체 허용으로 주소 설정 문제를 덮지 않습니다.
환경별 원인과 조치
확인 순서
- 프로덕션 브라우저의 네트워크 요청 URL에 localhost·127.0.0.1·개발 포트가 있는지 확인합니다.
- 코드와 번들에서 API base URL이 상수로 고정되어 있는지 검색합니다.
- 환경별 URL이 빌드 시 주입되는지, 서버 프록시의 상대 경로를 사용하는지 구분합니다.
- 운영 API의 HTTPS·CORS·경로를 별도로 확인합니다.
브라우저의 localhost는 배포 서버가 아니라 방문자 컴퓨터입니다. 주소를 고친 뒤에도 인증 쿠키·CORS·프록시 경로를 다시 검증해야 합니다.
참고 자료
Host header - HTTP | MDN (새 창에서 열림)
MDN · 공식 자료 · 확인 범위: 요청 대상 호스트는 실행 환경과 요청 URL에 따라 달라지며 localhost는 요청을 보낸 컴퓨터를 가리킬 수 있습니다. · 확인일: 2026-08-04