[아카이브 개인 프로젝트] Spring Boot 2.7.x + Vue 2 연동 에러 해결

CS Activity/Projects

Jenn28 2024. 2. 5. 22:46

이거때문에 삽질을 얼마나 했는지..

Spring Boot랑 Vue랑 연동하기 위해서 인터넷에 나와있는 모든 방법은 다해봤는데,

아무리 설정해도 프론트서버에서 백서버 연결이 안됐다..

일단 내가 해 본 시도와 해결법은 다음과 같다.

나는 Vue 2 버전을 사용하고 있었고,

vue.config.js 파일로 proxy 설정하는 것은 Vue 3 버전부터 webpack.config.js 파일이 없어진 관계로 생긴 방법이다.

따라서, 아무런 영향이 없었다.

심지어 나는 webpack.config.js 파일이 없었고, base / dev / prod 세 개의 파일로 나뉘어져있었다.

그래서 webpack.base.conf.js 와 webpack.dev.conf.js 에 둘 다 적용해봤으나 아무 소용이 없었다.

npm uninstall axios
npm install axios@0.25.0 --save

재설치를 진행했고 이번엔 CORS 에러가 떴다! 새로운 에러가 뜬거라 희망이 생겼다.

Spring Boot API에 @CrossOrigin("*") 을 추가해줬다.

proxy: config.dev.proxyTable,

위 처럼 설정되어있던 부분을 아래처럼 변경해줬다.

    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        ws: true,
        changeOrigin: true
      }
    },

드디어 프론트 서버인 1000번에서 백 서버 API를 띄웠다!

Jenvelop log