프록시 (Proxy)란?

<aside> 💡

프록시(Proxy): 클라이언트와 서버 사이에서 중간에 대신 요청을 전달하거나 응답을 받아주는 중계자 역할을 하는 서버

</aside>

기본 구조

[Client] ⇄ [Proxy 서버] ⇄ [실제 서버]

프록시의 주요 역할

기능 설명
🔁 요청 중계 클라이언트의 요청을 대신해서 서버에 전달
🛡️ 보안 원래 서버 IP 숨기기, 방화벽 역할
📊 로깅 트래픽 기록 및 모니터링
🗃️ 캐싱 정적 자원을 프록시 서버에 저장해 빠르게 제공
🔄 CORS 우회 프론트에서 직접 서버 접근 못할 때, 프록시로 우회 가능

📦 프록시 종류

유형 설명
🔹 정방향 프록시 (Forward Proxy) 클라이언트가 프록시를 통해 외부에 접근 (ex. 회사 내부망에서 외부 사이트 접근 차단)
🔹 역방향 프록시 (Reverse Proxy) 외부 요청이 프록시로 들어오고, 프록시가 내부 서버에 요청 (ex. Nginx, Load Balancer)
🔹 웹 프록시 웹 브라우저 트래픽을 중간에서 전달/필터링
🔹 API 프록시 클라이언트가 직접 백엔드에 접근하지 않고, API Gateway가 대신 요청

🔍 예시 상황

예시 1: CORS 우회 (로컬 개발 시)

프론트: <http://localhost:3000>
백엔드: <http://localhost:8080>

⇒ 브라우저 CORS 에러 방지를 위해 프론트에서 /api 요청을

프록시 서버가 http://localhost:8080으로 대신 전달

→ React, Vue에서 vite.config.js 또는 webpack으로 프록시 설정

// 예: Vite
proxy: {
  '/api': {
    target: '<http://localhost:8080>',
    changeOrigin: true,
    rewrite: path => path.replace(/^\\/api/, '')
  }
}