(Vue.js환경 만들기 4) proxy 설정

3. Springboot + Vue 개발환경 만들기1

위 글에서 이어집니다

 

vue.js dev서버에 proxy 설정을 해서 spring으로 오게 될 요청들을 모두 vue.js dev서버에서 proxing 하여 받고,

spring쪽으로 보내주도록 설정을 해볼것이다

 

1. 클라이언트에서 8081(vue)포트로 요청을 보내면 
2. 특정 url을 지정해 놓고, 8081에 해당 url로 온 요청을 다 8080(spring) 으로 보내준다 

 

 

2. Vue.js 에 proxy 설정

---

2-1

우선  frontend 디렉토리에 가서 두 가지 모듈을 설치해야한다.

• npm install request
• npm install path

reqeust 모듈은 프론트쪽에서 백엔드쪽으로 ajax 요청을 할 때 사용할 모듈

path는 vue.config.js에서 빌드된 결과물을 떨어뜨릴 타깃 디렉토리 설정을 할 때 필요한 모듈

 

frontend 디렉터리 아래에 vue.config.js 파일을 하나 만들고, 위와 같이 프록시 설정을 해준다.

앞으로 vue dev서버에서 localhost:8081/api로 오는 요청을 받으면 localhost:9000/api를 향해

다시 해당 요청을 요청을 다시 쏴줄 것이다.

그리고 응답을 받으면 개발자에게 받은 응답을 되돌려주는 것

 

 

2-2

proxy 설정을 확인하기 위해서 

Spring 서버에 /api 로 오는 요청을 처리해줄 수 있는 간단한 controller 를 하나 만들어놓자

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
    @GetMapping("/api/hello")
    public String hello(){
        return "hello";
    }
}

위 코드는 java의 springbootapi디렉토리 바로 아래 HelloController.java에 입력한 코드이다

 

 

2-3

이제 proxy 설정이 잘 되어있는지 확인해보자.

springboot 서버는 8080 포트, vue dev서버는 8081포트를 배정받아 실행 될 것이다.

 

다음 코드를 App.vue에 추가하여 확인하자.

 

 

---

 

나는 401에러가 발생하였다.

springboot 8080 으로 JWT토큰에 대한 에러메시지가 뜬 것을 보니

인증을 위한 JWT토큰을 넘겨주지 않고 실행했기 때문인것 같다

 

 

 

[거의 참고한 블로그 : https://deockstory.tistory.com/26]