[Vue3] devServer proxy 설정하는 이유, 방법

1. Vue로 개발 시 프록시를 설정해주는 이유

 

일반적으로 프록시 또는 프록시 서버는 클라이언트와 서버 간의 중간다리 역할을 한다. 프록시에 대한 글에 프록시의 개념과 종류에 대해 정리해 두었다. Vue 개발 시에는 개발 환경에서 프록시를 설정하여 사용한다. Vue CLI 서비스(웹팩 개발 서버)를 사용하여 개발 모드에서 앱을 실행하는데 개발 환경에서 /api/reservations/:id로 요청을 하면 자동으로 http://localhost:8080/api/reservations/:id로 호출이 된다. 이렇게 되면 localhost:8080는 백엔드 서버에서 허락한 도메인이 아니기 때문에 브라우저에서 CORS 오류가 난다. 배포를 하고 나면 미리 설정한 도메인으로 바뀌니 상관이 없지만 로컬에서 개발 도중에 api 테스트를 하면서 작업을 하고 싶을 때는 이 CORS 문제를 해결해줘야 한다. 

 

2. 프록시 설정을 해 주는 방법

 

vue.config.js 파일에서 devServer에 Proxy 설정을 해 주면 된다. 웹팩 devServer 설정 방법 및 의미를 설명한 글

 

module.exports = { 
  devServer: {
    proxy: {
      '/api': { 
        target: 'https://eunjinii.com',
        changeOrigin: true,
      }, 
    },
  },
};

 

위와 같이 설정해 주면, 로컬 개발 서버에서 요청을 할 때 https://eunjinii.com/api/reservations/:id로 하게 된다. 각각의 속성에 대해 정리해보았다.

 

2-1. /api

 

백엔드 api path가 /api로 시작한다는 의미다. 만약에 동일한 프로젝트인데 백엔드 api path가 각각 다르다면 다음과 같이 따로 작성해 주면 된다.

 

module.exports = { 
  devServer: {
    proxy: {
      '/api': { 
        target: 'https://eunjinii.com',
        changeOrigin: true,
      },
      '/token': {
        target: 'http://dev-api-eunjinii.com',
        changeOrigin: true,
      },
    },
  },
};

 

2-2. target

 

웹팩 개발 서버에다가 도메인, 포트, 프로토콜을 서버가 허용한 주소랑 맞춰달라고 하는 것이다.

 

2-3. changeOrigin

 

출처를 target URI로 바꾼다는 말이다. CORS에러를 막기 위한 옵션이다. 

로컬호스트 url과 서버 주소가 다르기 때문에 브라우저는 교차출처 에러를 낸다.

 

웹팩 데브 서버가 프록싱 역할을 해 준다.

 

개발하는 과정에서 브라우저는 http://localhost:8080/api/reservations/:id로 요청을 하지만, 중간에 프록시 서버 덕분에 백엔드 api와 같은 도메인인 http://eunjinii.com 또는 http://dev-api-eunjinii.com 으로 요청한 것으로 인식하게 할 수 있다. 

 

// reservationsApi.js

const reservationInstance = axios.create({
  baseURL: `${baseUrl}`,
  timeout: 2500,
}); 

export const fetchData = async (id) => {
  const response = await reserveInstance.request({
    url: `/api/reservations/${id}`,
    method: 'GET',
  });
  return response;
};

 

그리고 api 호출을 하면 된다.