반응형
프록시(Proxy)란?
JavaScript의 Proxy 객체는 객체를 감싸서 동작을 가로채고 수정할 수 있는 기능을 제공한다. 즉, 어떤 객체를 감싸서 해당 객체의 프로퍼티 접근, 값 변경, 함수 호출 등을 가로채서 특정 로직을 추가하거나 동작을 변형할 수 있
왜 Proxy를 쓰는가?
로컬 개발 환경에서는 보통 프론트엔드(Vite)와 백엔드(Spring Boot)가 분리되어 있다. 이때, CORS (Cross-Origin Resource Sharing) 문제가 발생할 수 있다.
브라우저 보안 정책상, 다른 도메인(예: http://localhost:5173 → https://something.com)으로 요청을 보내면 차단될 수 있기 때문이다.
Vite의 프록시를 설정하면:
- CORS 문제 해결: 프론트엔드에서 백엔드로 직접 요청하는 게 아니라, Vite 개발 서버를 거쳐서 요청을 보내므로 브라우저가 차단하지 않는다.
- 요청 URL을 간단하게 관리: API 엔드포인트가 바뀌어도 프록시 설정만 변경하면 되니까 프론트엔드 코드 변경 없이 쉽게 대응할 수 있다.
- 보안 강화: API 엔드포인트를 직접 노출하지 않고 Vite 서버를 거쳐서 요청하므로, 클라이언트 코드에서 백엔드 URL이 직접 보이지 않다.
정리
로컬에서 API 요청을 보낼 때 별다른 CORS 문제 없이 백엔드 서버로 요청을 전달할 수 있어다.
API 엔드포인트가 변경되더라도 프록시 설정만 수정하면 클라이언트 코드 수정 없이 적용할 수 있다.
개발 환경에서 편리하게 사용할 수 있지만, 배포 환경에서는 프록시 대신 백엔드 서버의 CORS 설정을 조정하는 게 일반적이야.
예전에 프로젝트를 할 때 백엔드 서버단에서 특정 도메인에서 오는 요청들은 ALLOW를 하는 식으로 CORS 문제를 해결했던 것으로 기억한다.
반응형
