[VUE] Nuxt or Vue 프록시 설정

API 통신을 하다보면 필연적으로 마주치는 cors이슈 때문에 proxy를 설정하게 되는데 vue와 nuxt환경에서 개발 시 마주치는 cors로 인한 proxy설정을 하는 방법을 정리해둘까한다.
nuxt proxy 설정

npm i @nuxtjs/proxy

nuxtjs/proxy를 인스톨하고 아래와 같이 nuxt.config.js에 설정해준다.
example

proxy: {
    '/api': 'http://localhost:9999',
}
modules: [
    '@nuxtjs/proxy'
]

프록시 부분엔 proxy가 필요한 api uri정보를 넣으면 된다.
그럼 nuxt가 아닌 환경에서는 어떻게 설정할까?
일반적인 vue에서는 vue.config.js에 아래와 같이 설정한다.

    devServer: {
        host: '0.0.0.0',
        hot: true,
        disableHostCheck: true,
        port: 3000,
        https: false,
        overlay: {
            warnings: true,
            errors: true
        },
        // API 프록시 세팅 추가
        proxy: {
            '/api': {
                target: 'http://localhost:8010',
                secure: false,
                changeOrigin: true
            }
        }
    }

해당 부분들은 예제이니 자신의 호스트 정보에 맞게 설정하면 될 듯 하다.

nuxt의 경우 실제로 설정해서 토이프로젝트를 만드는중인 개인 깃헙이 있어 공유할테니 참고용으로 첨부

https://github.com/joys1006/vue-typescript-nuxt-sample