[Vue, Spring Boot]Proxy error: Could not proxy request ~

상황

그동안 내가 맡았던 프로젝트는 front와 back이 뚜렷한 경계없이 Spring boot, JavaScript를 사용하여 한 프로젝트 내에서 풀스택으로 개발을 진행했다.

올해부터는 회사에서 내부 프로젝트를 진행하면서, front-end와 back-end의 구분을 나누게 되었다.

back과 front를 분리하여 개발을 진행하는 것이 처음이다보니, 생각지도 못한 곳에서 에러가 발견되곤 했다.

(글에 본격적으로 들어가기에 앞서, 나는 Vue2에 대한 전반적인 내용만 겉핥기식으로 이해하고 있는 상황이라서 잘못된 내용이 있을 수도 있다. 문제 있을 경우 살포시 알려주시면 더 공부해보겠다.)

 

---

환경

front : vue 2 (8080 포트사용)

back : Spring Boot (8081 포트사용)

IDE : intellij 2023.3.2(Ultimate Version)

 

---

 

문제발생

프로젝트 셋팅은 Back단과 front단 모두 잘 마쳤다.

그리고 init페이지인 로그인 form 페이지도 잘 띄웠다. 

(front는 8080포트를 사용하므로  http://localhost:8080 으로 입력)

그런데 문제는 back단과 api 통신할 때 발생했다.

ID 와 Pwd를 잘 입력하고 로그인 버튼을 누르는 순간 아래와 같이 떴다.

console창

IDE terminal창

 

---

문제해결

 

✔️1. 원인 찾기

먼저 살펴볼 코드는 아래와 같다.

📌vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  
  devServer: {
    proxy: {
      '/api': {
        // '/api' 로 들어오면 포트 8081(스프링 서버)로 proxy 처리
        target: 'http://localhost:8081',
        changeOrigin: true // cross origin 허용
      }
    }
  },


})

📌SignIn.vue

<script>
import axios from "axios";
import { mapState } from "vuex";

export default {
  name: 'SignIn',
  data: () => ({
    UserId: null,
    password: null,
    show1: false,
  }),
  computed: {
    ...mapState('app', ['isLogin','BASE_URL'])
  },
  methods: {
    signIn(){
      var formData = new FormData();
      formData.append('username', this.UserId);
      formData.append('password', this.password);
      
      axios.create().post(`/api/v1/login`, formData).then(
        ({data}) => {
          this.$store.commit('setToken', data);
          this.$store.commit('setIsLogin', true);
          this.$router.push("/");
        }
      );
    }
  }
}
</script>

로그인 버튼을 클릭하면 '/api/vi/login' url로 post방식으로 api 통신을 하게된다. 

vue.config.js에서 설정해놨듯이 '/api'로 들어오면 localhost:8081로 proxy 처리를 하게 된다.

front단에서 호출한 localhost:8081/api/vi/login 을 back단에서 받아서 데이터 처리를 하는 것이다.

 

아래 이미지를 참고하면 이해하기 쉬울 것이다.

 

 

여기까지의 코드는 문제가 없다.

실제로 여기까지의 설정으로 다른 개발자분들의 로컬에서는 매우 잘 돌아갔다.

근데 몇 시간동안의 삽질 끝에 문제를 찾았다.

 

📌바로🥲VM Option설정 때문이었다.

예전 프로젝트에서 설정해놓은 그대로 아래 옵션을 설정해놓았다.

저 옵션에 대해서는 아래 더보기 눌러서 살펴 볼 것.

 

 java.net.preferIPv4Stack=true

Java 는 OS 에서 IPv4 와 IPv6 가 모두 사용 가능할 경우 IPv6 를 우선적으로 사용한다.

IPv6는 0:0:0:0:0:0:0:1 로 주소가 읽혀 오기에, 더 나은 가독성을 위해서 IPv4를 우선적으로 사용할 수 있도록 변경하는 방법이다. 

 

📌현재 상황 정리

 

✔️2. 해결

원인을 찾았으니 이제 없애면 된다.

📌VM Option 설정 제거

 java.net.preferIPv4Stack=true를 제거했더니 문제없이 잘 실행됨을 확인했다.