[Vue.js] Vue2 axios proxy 설정하기

8081에서 spring boot로 띄운 8080서버로 api를 요청해야한다
 
이때 cors 에러가난다
 
해결방법은
 
vue.config.js

...
devServer: {
    // historyApiFallback: true,
    proxy: {
      '/user*': {
        target: process.env.VUE_APP_API_URL,
        changeOrigin: true,
      },
      '/repo*': {
        target: process.env.VUE_APP_API_URL,
        changeOrigin: true,
      },
    },

user로시작하는 모든 요청에 env파일에 요청한 url 로 들어가게해놓고
응답올때도 마찬가지로 cors를 뚫기 위해 changeOrigin true로 해줬다
 
api 설정 파일에서

function repositories() {
  return axiosService.get('/repositories');
}

이렇게 url 경로만 간단하게만 적어주면 된다.
 
여기서 주의할게있다
 
난 config 설정을 해줬는데도 cors에러가 났는데 문제는 api의 index.js에서

const axiosService = axios.create({
  // baseURL: process.env.VUE_APP_API_URL,
  // headers: {
  //   // Authorization: store.state.token,
  //   Authorization: 'accessToken',
  // },
});

baseurl과 header설정이 있었다.
proxy에서 이미 api날릴때 경로를 지정해줬기대문에 axios.create에서 선언해줄 필요가 없던것이었던것. .
 
아무튼 에러해결 ㅋ
 
앗 env파일은 별도로 생성해줘야한다
.env

VUE_APP_API_URL='http://{보낼 IP 주소}:{포트}' //이런식으로 url 설정

여기서 선언한 변수? VUE_APP_API_URL 로 무조건 지정해줘야하며 저 변수는 뷰가 알아서 인식해주기때문에 config에서 사용가능한것이다.
 
또하나 tip은 저 주소 '' 없이 했었는데도 안됐다 . . 그니까 ''필수띠