프로젝트-Vue에서 Spring boot로 api 요청 보내기

vue에서 spring boot로 post 요청을 보내야 했다. 스프링 부트는 api 서버 역할을 수행하고 vue는 화면구성을 담당하기 위해서 분리를 하였기 때문이다.

 

vue는 개발 포트를 5173을 사용하고 spring boot 서버는 개발포트를 8080을 사용하고 있다.

 

vue에서 axios post 요청을 하게되면 localhost:5173/[요청한 경로]로 요청된다.

 

8080으로 요청을 하기 위해서 vue에서는 proxy 설정을 해주어야 한다.

 

나의 경우는 vue3 구성으로 프로젝트를 구성하여서 설정 파일 이름이 vite.config.js이다.

 

참고로 vite.config.js는 Vite의 설정 파일로, 프로젝트의 빌드 및 개발 서버 구성을 관리한다.

 

다음과 같이 설정해주었다.

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevTools from "vite-plugin-vue-devtools";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueDevTools()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  build: {
    outDir: "../../backend/timeLog/src/main/resources/static",
  }, // 빌드 결과물이 생성되는 경로. 스프링 부트 프로젝트의 static 경로로 잡아줌
  server: {
    proxy: {
      "/api": {
        // '/api' 로 들어오면 포트 8080(스프링 서버)로 보낸다
        target: "http://localhost:8080",
        changeOrigin: true, // cross origin 허용
      },
    }, // proxy 설정
  },
});

 

 

추가한 부분은 다음과 같다.

  build: {
    outDir: "../../backend/timeLog/src/main/resources/static",
  }, // 빌드 결과물이 생성되는 경로. 스프링 부트 프로젝트의 static 경로로 잡아줌
  server: {
    proxy: {
      "/api": {
        // '/api' 로 들어오면 포트 8080(스프링 서버)로 보낸다
        target: "http://localhost:8080",
        changeOrigin: true, // cross origin 허용
      },
    }, // proxy 설정
  },

 

스프링 부트 서버를 api 서버로 활용하기 위해 스프링 부트로 보내는 요청들은 "/api"를 앞에 붙여주었다.

 

build 부분은 배포를 위해 미리 설정을 해두었다. npm run build 명령어를 실행하면 원래는 vue 내부에 build된 파일들이 생성되는데 그 생성 파일을 스프링부트의 static으로 경로를 잡아준 것이다.

(내가 스프링 부트 프로젝트를 둔 경로로 잘 찾아가야 정상적으로 스프링 부트의 프로젝트 내에 설치된다.)

 

잘 되는지 실습을 실습을 해보았다.

 

그냥 일단 테스트를 위해 값들은 아무렇게나 넣어주었다.

(학년의 one은 숫자 1이 넘어간다.)

 

 

확인을 위해 디버깅 모드로 실행하였다. 요청은 5173으로 간다.

 

요청은 다음과 같이 해주었다.

(저번에 토이 프로젝트를 할 때 사용했던 vue의 options api 방식을 사용중이다.)

registerStudent() {
    axios.post('/api/student/new', {
        name: this.form.name,
        grade: this.form.grade,
        parentPhoneNumber: this.form.parentPhoneNumber,
        schoolName: this.form.schoolName,
    }).then((response) => {
        console.log("Success:", response);
        alert("학생 등록 성공!");
    }).catch((error) => {
        console.error("Error:", error);
        alert("학생 등록 실패. 다시 시도하세요.");
    });
}

 

분명 5173으로 요청이 갔는데 스프링 부트 컨트롤러의 브레이크 포인트에 걸렸다.

 

넘겨준 값들이 잘 넘어온 것을 확인할 수 있고 200 상태 메시지와 axios의 성공 시 then() 부분의 메시지가 잘 뜨는 것을 확인하였다.

 

jpa의 insert문이 로그에 찍혔다.

 

DB(H2) 조회 결과