[JS][Vue] local에서 proxy table 사용하기

webapp과 webapi를 분리하여 개발하다보면, webapi 호출이 CORS 이슈로 인해 제대로 불리지 않는 경우가 많다. CORS는 Cross Origin Resource Sharing로, 도메인 또는 포트가 다를 경우에 호출을 허용하지 않는 정책을 말한다.

보안을 위해 고안된 정책으로, SPA를 기반으로 호출할 때에는 번거로운 것이 사실이다. 물론 개발 서버나 운영 서버에 올리고 나면 백엔드에 render를 붙이든, 따로 구성했지만 nginx를 통해 내부 호출을 구성하든간에 CORS 이슈를 위반하지는 않게 되어 운영상에 문제되지는 않는다.

다만 local에서 개발할 때 API 호출을 통해 테스트가 되어야 코드를 올리고, 빌드를 하고 배포가 될 것이다.

CORS를 해결하기 위해 크게 두 가지 방법이 있는데, 첫 번째는 백엔드 쪽에서 CORS를 허용해주는 방법이다. 보통 라이브러리나 패키지가 있어 이를 허용해줄 수 있는데, 지정 도메인/포트에 한해 CORS를 허용해주거나 할 수도 있지만 애초에 보안 때문에 막아놓은 부분을 예외로 허용해준다는 부분이 썩 매끄럽지는 않다.

두 번째 방법은 프론트엔드 쪽에서 우회하는 방법인데, Vue.js의 WebPack에서는 proxy table이라는 기능을 제공한다. proxy는 대리라는 뜻으로, 두 곳을 중계해준다. 즉, 프론트엔드가 열려있는 localhost:8080의 뒤에 /api/ ~를 호출하더라도 실제로는 proxy table에 있는 것들을 호출한다.

devServer: {
	// ...
	proxy: {
        	"/api": {
            	target: 'http://localhost:5000'
            },
        },
    // ...
}

 

webpack의 config 파일에서(webpack.dev.config.js 혹은 webpack.config.js) 위와 같이 작성해주면 /api로 시작하는 http request들은 target의 주소로 CORS 이슈 없이 요청이 가게 된다. 예시에는 localhost를 썼지만 실제 domain을 써 주어도 동작한다.

* 추가 : VUE CLI 버전 4 이상에서는 webpack의 config 파일이 없고 대신 vue.config.js 파일이 생성된다. 적어주는 내용은 다르지 않고 위와 같이 devServer 내용들을 적어주면 정상적으로 동작한다.