Vue Dev Server Proxy란?

✅ Vue Dev Server Proxy란?

CORS 문제 없이 프론트(Vue 개발 서버)에서 백엔드(API 서버)로 요청을 보내기 위해,
개발 중에 Vue Dev Server가 프록시 서버 역할을 하도록 설정하는 기능입니다.

---

🧭 배경 설명 (왜 필요한가?)

• 브라우저는 보안상 출처(origin)가 다른 서버로 요청을 직접 못 보냄 → CORS 에러 발생
• localhost:8080 (프론트) → localhost:8090 (백엔드) 요청 시도 시 차단됨 ❌
• 이 문제를 해결하기 위해 Vue Dev Server가 백엔드로 요청을 대신 보내줌 🔁

---

📁 예시: vue.config.js 설정

module.exports = {

        devServer: {

                proxy: {

                        '/dev-api': {

                                target: 'http://localhost:8090', // 백엔드 주소

                                changeOrigin: true,

                                pathRewrite: { '^/dev-api': '' } // URL 앞부분 제거

                  }

                }

       }

}

---

🔁 실행 흐름 예시

1. Vue 앱에서 요청:
   axios.post('/dev-api/auth/login', { ... })
2. 브라우저는 실제로 localhost:8080/dev-api/auth/login 요청을 Vue Dev Server에 보냄
3. Vue Dev Server가 대신 요청을 보냄:
   → http://localhost:8090/auth/login
4. 백엔드 응답 → Vue Dev Server → 브라우저로 전달

✅ 브라우저는 CORS 에러 없이 통신 성공!

---

📌 각 옵션 설명

옵션설명

target	실제로 요청을 보낼 백엔드 서버 주소
changeOrigin	헤더의 origin을 target 주소로 바꿔줌
pathRewrite	프록시 요청 경로를 수정 (ex. /dev-api 제거)

 

---

🔍 login 버튼 클릭 시 실제 흐름

예를 들어 아래 버튼 클릭 시:

<button @click="login()">로그인</button>

methods: {

        login() {

                loginAPI(this.username, this.password) // → axios.post('/dev-api/auth/login')

        }

}

 

➡ Vue Dev Server가 /dev-api로 시작하는 요청을 가로채서
➡ 설정된 백엔드 주소(http://localhost:8090/auth/login)로 프록시 요청

---

🔧 실무 팁

상황해결책

프론트 개발만 할 때	proxy 설정만 해도 백엔드 없이 개발 가능
운영환경에서는?	proxy 사용하지 않고, 실제 배포된 API 경로 사용
서버가 CORS 지원하면?	proxy 없이도 요청 가능하지만 dev 단계에서는 proxy가 더 편리함

 

---

✅ 정리 요약

항목설명

proxy 역할	Vue 개발 서버가 API 요청을 중계(가로채기)
목적	CORS 문제 없이 백엔드와 통신하기 위해
login 흐름	Vue → Dev Server(proxy) → 백엔드로 요청 전달
설정 위치	vue.config.js의 devServer.proxy 속성