0. 드디어 해결..
이거때문에 삽질을 얼마나 했는지..
Spring Boot랑 Vue랑 연동하기 위해서 인터넷에 나와있는 모든 방법은 다해봤는데,
아무리 설정해도 프론트서버에서 백서버 연결이 안됐다..
일단 내가 해 본 시도와 해결법은 다음과 같다.
1. vue.config.js 파일 생성 & proxy 설정
나는 Vue 2 버전을 사용하고 있었고,
vue.config.js 파일로 proxy 설정하는 것은 Vue 3 버전부터 webpack.config.js 파일이 없어진 관계로 생긴 방법이다.
따라서, 아무런 영향이 없었다.
2. webpack.base.conf.js 파일 수정
심지어 나는 webpack.config.js 파일이 없었고, base / dev / prod 세 개의 파일로 나뉘어져있었다.
그래서 webpack.base.conf.js 와 webpack.dev.conf.js 에 둘 다 적용해봤으나 아무 소용이 없었다.
3. axios 재설치 & 다운그레이드
npm uninstall axios
npm install axios@0.25.0 --save
재설치를 진행했고 이번엔 CORS 에러가 떴다! 새로운 에러가 뜬거라 희망이 생겼다.
Spring Boot API에 @CrossOrigin("*") 을 추가해줬다.
4. webpack.dev.conf.js 파일 다시 수정
proxy: config.dev.proxyTable,
위 처럼 설정되어있던 부분을 아래처럼 변경해줬다.
proxy: {
'/api': {
target: 'http://localhost:8080',
ws: true,
changeOrigin: true
}
},
드디어 프론트 서버인 1000번에서 백 서버 API를 띄웠다!