[Vue.js] Proxy 사용하기

프로젝트에서는 클라이언트인 Vue 애플리케이션과 서버 애플리케이션을 분리해서 개발하고 각각을 별도의 포트로 운영하게 되는 경우가 많다. 이렇게 클라이언트와 서버 애플리케이션 별도의 포트를 사용하는 경우 클라이언트 애플리케이션에서 서버로 HTTP 요청을 하게 되면 CORS 문제가 발생하게 된다. 이러한 문제를 해결하기 위해서 Proxy 서버를 사용하게 된다.

프록시(Proxy) 서버

프록세(proxy) 서버는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 응용 프로그램이다. 서버와 클라이언트 사이에 중계기로써 대리로 통신을 수행하는 것을 프록시, 그 중계 기능을 하는 것을 프록시 서버라고 한다.

CORS란

웹 애플리케이션에서 도메인, 포트, 프로토콜이 다른 곳으로 HTTP 요청을 보낼 수 없도록 브라우저가 요청을 막는 보안 정책이다.

CORS 해결 방법

서버에서 접근을 허용해주면 된다.

#### 프록시 서버를 이용한다. 클라이언트(브라우저)와 서버 사이에서 HTTP 요청과 응답을 대신 처리해주는 역할을 하는 서버를 프록시 서버라고 한다. 프록시 서버를 이용하는 방법을 알아보자.

### Proxy 설정하기

프로젝트 루트 디렉토리(package.json 파일과 같은 위치)에 vue.config.js 파일

 const target = 'http://127.0.0.1:3000'; //proxy 요청을 보낼 서버 주소

module.exports = {
  devServer:{
    port: 8081,
    proxy: {
      // proxy 요청을 보낼 api 시작 부분
      '^api': {
        target,
        changeOrigin : true
      }
    }
  }
} 

vue에서 proxy를 설정하고 클라이언트(브라우저)에서 HTTP 요청(포트:8080)을 하면 proxy 서버가 웹 서버로 HTTP 요청(포트:3000)을 대신 함으로써 CORS 문제를 해결할 수 있다.

### 서버에서 CORS 해결 위에서는 서버를 배제하고 하는 방법인 vue.config.js의 devserver에 proxy를 설정했다. 이렇게 설정할 경우, 개발 환경에서는 정상적으로 수행되지만, 운영환경에서는 실행되지 않게 된다. CORS를 정확히 해결하려면 결국 서버에서 처리해야 한다.