devServer proxy 설정

프로젝트의 최상단에 있는 vue.config.js 파일을 수정하면 된다.

 

module.exports = {
  devServer: {
    proxy : {
      '^/api': {
        target: 'http://localhost:8080',
        pathRewrite: { '^/api' : '' },
        changeOrigin: true,
        logLevel: 'debug',
      }
    }
  },
}

이런식으로 적용한다.

 

vue에서 http://localhost:8000 로 설정한 웹페이지가 있다고 하자

만약 브라우저로 'http://localhost:8000/api' 경로로 접속하면

target 주소인 'http://localhost:8080'의 내용이 전달된다.

대충 이런식이다.

 

logLevel 옵션은 꼭 안넣어도 된다. 이는 터미널에서 로그찍기 위함이다.

changeOrigin 옵션은 CORS 오류 방지를 위한 옵션이다;

 

vue나 react에서 axios 사용시 알아두면 편할 것 같다.

 

지금 프론트는 vue, 백은 스프링 레거시로 공부 중에 있어 글 남겨본다.