[Vue] proxy 설정.(vue cli)

vue3Cli 프로젝트를 진행하면서 도메인이 다른 API서버에 요청을 보낼 시 cors error가 발생하는 경우가 빈번하다.

 

위와 같이 Node js 서버에서 Proxy 설정이 가능하다.

 

1. vue.config.js

vue-cli 프로젝트의 루트 디렉토리(package.json 파일이 있는 위치) 에서 vue.config.js 라는 파일을 만들어줍니다.

 

2.devServe 설정

vue.config.js 파일에 다음과 같이 작성해줍니다.

// 파일 경로: /root/vue.config.js

module.exports = {
        // 개발 서버 설정
        devServer: {
            // 프록시 설정
            proxy: {
                // 프록시 요청을 보낼 api의 시작 부분
                '/api': {
                    // 프록시 요청을 보낼 서버의 주소
                    target: 'http://localhost:3000'
                }
            }
        }
};

3) 실행

vue.config.js 와 같은 설정 파일은 핫 로딩이 지원되지 않습니다. 개발서버를 재실행합니다

// vue cli 3.x 버전 이상일 때 개발서버 실행 기본 명령어
npm run serve

출처 https://velog.io/@skyepodium/vue-proxy-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0