Vue, SpringBoot HTTP 통신 테스트(cors 허용)

스프링 부트 부분

• 프로젝트 구성 시작전 몇가지 테스트를 위해서
• 스프링부트와 vue.js의 node.js 통신 테스트를 시도해봤습니다.

• 간단한 테스트인 만큼 web설정파일과(cors 허용을 위해서)
• Get방식의 간단한 Controller 클래스만 생성해둔 상태입니다.

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class SecurityConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST");
    }
}

• allowedOrigins => 모든 자원을 허용해줍니다

• allowedMethods => 코드 그대로 http 요청 메소드 허가 범위를 설정해줍니다.

• 둘다 ("*")를 이용해서 모두 허가해주거나 몇가지 지정 해줄수도 있습니다.

• 컨트롤러는 간단한 문자열을 리턴해줍니다.

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

// Vue와 같이 사용할 Test 작업환경

@RestController
public class TestApiController {
    
    
    // api테스트
    @GetMapping("test")
    public String test(){
        return "Test RestAPI Get";
    }


}

Vue 부분

• 아직 Vue는 공부중이며 아는것이 많지 않아서 최소한의 설명만 적겠습니다.

• 아래의 코드를 복사해서 html쪽에 넣어줍니다

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• Axios 를 이용해서 스프링 부트 톰캣 서버와 통신을 했습니다.
• Axios 란? Ajax와 같은 HTTP 비동기 통신 라이브러리 입니다.

결과

• 사진과 같이 vue단의 서버 8079포트에서 axios 비동기 통신을 통해
• 8080 스프링 서버로 값을 요청해 받아온 것을 확인 할 수 있습니다.

앞으로 해야할 것

• nginx 프록시를 이용한 배포작업을 위한 공부
• 프론트 쪽 공부 (Vue)