문제.

sts4 + spring boot + vue.js 기반으로 개인프로젝트를 해볼까 하고 공부중던 때에... spring boot로 Rest API를 만들고 vue.js로 view를 만든다음 view에 불러오려고 했는데 axios(ajax)를 사용하던 도중 spring boot 서버port(Rest API server)에서 값을 view쪽에 전해주려는데 도메인이 달라서 CORS 에러가 등장했다...

해결.

CORS는 도메인이 다른 웹페이지의 request를 방지하기 위한 용도라고 가볍게 생각하면 된다.

우선 vue.config.js파일에 Rest API서버의 도메인을 적어주면 되는데

module.exports = {
  devServer: {
    proxy: {
      '/':{
        "target":'도메인 URL',
        "pathRewrite":{'^/':''},
        "changeOrigin":true,
        "secure":false
      }
    }
  }
}

이것을 넣어주면된다.

주의 : pathRewrite부분이 만약

pathRewrite:{'^/api':'/change'} 로 되어있으면

/api로 시작하는 문자를 /change 로 변경 이다.

그러면 front 쪽에는 불러올 URL에 '/' + user/Info 이렇게 불러오면된다 ( /user/Info <- 맨 앞 /는 vue.config.js 에서 Rest API서버의 URL을 / 로 쓴다했으니 )

front쪽

fetch(){
     axios.get('/user/Info')
    .then ....
}

이제 값을 불러올 수 있으니 내일은 오라클DB와 연결해서 본격적으로 나갈예정이다.