[Vue.js] Vue cli2 & CORS 간단한 세팅법

 

CORS 그리고 Vue.js

이전 포스트에서 이론적으로 CORS를 다루었기 때문에, trouble shooting을 다루어보려고 한다.

https://daniel-park.tistory.com/3

CORS(Cross Origin Resource Sharing)

Node.js로 front, back 모두 개발하면, 모든 스택을 커버하기 때문에 세팅이 비교적 쉬울 것이다. 하지만 legacy 서버가 다른 언어로 짜있거나, api서버는 node로 하고 싶지 않을 경우가 있다. 이때에는, node.js & Vue.js로 만들어진 UI만 백엔드에서 호스팅해주면 된다.

필자도 주로 node.js 과 Vue.js 프레임워크를 사용해 front-end를 dev 모드로 개발하고, back-end는 다른 언어(Elixir)로 개발하고 있기 때문에 CORS 이슈는 항상 직면하는 문제이다. 요즘엔 번들러로 Webpack이 기본으로 세팅된 boilerplate로부터 시작하는 경우가 많지만, 가볍게 개발이 필요한 경우에 vue-cli로 간단한 프로젝트로부터 시작하기도 한다.

---

기존에 쓰던 방법

기존에는 앞서 언급했던 것처럼, 프론트를 node&Vue로, 백엔드를 elixir로 만들었다. "정말" 비효율적으로 개발하는 프로세스는 구현하던 ui를 build한 후 back에서 로드할 것이다. 하지만 그럴 개발자는 없을 것이라고 생각한다.

Dev모드로 개발할 때는, node.js dev 서버(localhost:8080)를 사용했기 때문에, 백엔드에서 각 path들의 라우팅을 따로 세팅해주었다. index.html, css, js 등등 ui 렌더링에 필요한 패스는 node.js dev 서버(localhost:8080)으로 리다이렉트해주고, api 요청들만 백에서 처리해주었다. 이런 접근도 나쁘지 않지만, 역시나 개발자는 쉬운 방법을 찾기를 원한다.

---

Vue 세팅

해결법은 아주 간단하다.

package.json과 같은 레벨의 path에 아래의 그림1처럼 vue.config.js를 만들어준다. 똑똑한 @vue/cli-service가 자동적으로 이 configuration을 로드해줄 것이다.

그림1_vue세팅

파일을 만을어준 후, proxy로 쓸 백엔드의 주소를 넣어주면 해결된다.

module.exports = {
  devServer: {
    proxy: 'http://localhost:1290'
  }
}

물론 production으로 UI를 build하고 백에서 사용하면 path가 같기 때문에 염려할 필요가 없다.

하지만, 이제 dev 모드로 UI를 개발할 때, proxy(중계) 세팅을 통해서 프론트와 백을 간단히 연결해주면 끝난다.

이렇게 쉬운 방법이 있었는데, 멀리 돌아간 것을 보니 허망하다.

---

참고

Vue.js 공식사이트: https://cli.vuejs.org/config/#devserver-proxy