프론트엔드 개발 CORS 문제 PROXY 설정하기

프론트엔드 개발을 하다 보면 API를 사용하면서 CORS (Cross-Origin Resource Sharing) 문제가 자주 발생하곤 한다.

개발 환경에서는 Vite의 Proxy 서버를 통해 CORS 문제를 임시로 해결할 수 있다. Proxy를 사용하면 로컬 환경에서 외부 API 요청을 안전하게 포워딩할 수 있어 개발 중에는 편리하다. 그러나 이 과정에서 중요한 불편함이 하나 있다.

개발 환경과 배포 환경의 설정 차이

개발 단계에서는 API 요청의 baseURL이 Proxy의 target 주소와 다르게 설정하는데 이때 깔끔한 방식은 여러개의 env를 사용해서 여러개의 환경에 적용하는 것이라고 생각한다.

개발 환경: 로컬 서버에서 /api 경로를 Proxy가 외부 API 서버로 포워딩함.

배포 환경: API 서버의 실제 baseURL(예: https://example.com)를 바로 사용.

env 설정 예시

// .env (개발 환경)
VITE_API_URL=/api

// .env.production (배포 환경)
VITE_API_URL=https://example.com

vite 설정 예시

// vite.config.json
proxy: {
    "/api": {
        target: "https://example.com",
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, "")
    },
}

Axios 설정 예시

// axios.js
const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
    withCredentials: true,
});