http proxy 설정

Vue CLI가 생성하는 프로젝트 템플릿 코드에서는 약간의 설정 파일만 작성하면 웹팩 개발서버를 이용해 프로시 서버 기능을 사용할 수 있다. 프로젝트 최상위 디렉토리에 vue.config.js파일을 생성하고 아래의 코드를 작성한다.

 

vue.config.js

module.exports = {
    devServer: {
        host: 'localhost',
        port: '80',
        proxy: {
            '/api': {
                target: 'http://localhost:8081',
                changeOrigin: true
            }
        }
    },

이렇게 하면 개발용 서버에 /api/contacts를 요청하게되면 http://localshot:8081/contacts로 요청일 전달 도니다. 

 

만약 위의 서비스 API 서버를 로컬에서 실행하지 않는다면 위의 target 값을 http://sample.bmaster.kro.kr 으로 지정하면 된다.

 

※ http:// 필수로 넣어줘야 한다!