스프링 부트 비동기 통신

백엔드 서버를 돌린 상태에서 프론트엔드에서 비동기 통신을 통해 백엔드 서버로 데이터를 요청하는 방식으로 예제를 구성한다.

Cors 설정

각각 두 개의 환경에서 이클립스를 실행하여 다른 포트로 서버를 실행할 것이기 때문에 cors를 신경써야 한다.

CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 보안 상의 이유로 기본적으로 적용되는 웹 애플리케이션의 정책이다. 이 정책에 따라 웹 페이지나 웹 애플리케이션은 다른 도메인(Origin)으로부터 리소스에 접근하는 것을 제한한다.

즉 허용하는 도메인을 설정해야한다는 것이다.

스프링부트 프로젝트로 가서 java내의 자신이 생성한 패키지 폴더 내에 WebConfiguration.java파일을 만든다.

@Configuration
public class WebConfiguration implements WebMvcConfigurer {

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

allowedOrigins() 내에 허용하는 도메인(여기서는 포트를 사용하므로 localhost:3000등)을 적는다. *을 사용하면 모든 경우 진입을 허용하는 것이다.

백엔드 프론트엔드 통신

사용할 컨트롤러는 아래와 같다. 또한 스프링 부트 포트 프로젝트의 포트는 3100번을 사용한다.

@RestController
public class HelloController {
    @GetMapping("/human")
    public HumanDto human() {
        System.out.println("----- HelloController human() -----" + new Date());

        HumanDto human = new HumanDto(1, "길동", "여기");

        return human;
    }
}

이제 다른 서버로 실행시킨 html파일에서 해당 스프링 부트 서버의 컨트롤러에 진입해 값을 받아올 수 있다.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
 <script src="https://code.jquery.com/jquery-latest.min.js"></script>
<body>

<button type="button" id="btn">Btn</button>
</body>
<script>
$(document).ready(() => {
    $("#btn").click(function () {
        $.ajax({
            url: "http://localhost:3100/human",
            type: "get",
            success: function (res) {
                console.log(res);
            },
            error: function () {
                alert("error");
            }
        });
    });
});
</script>
</html>

아래의 데이터를 받아왔음을 확인할 수 있다.

결과

{number: 1, name: '길동', address: '여기'}

데이터 사용

프론트에서 백엔드의 아래의 컨트롤러로 데이터를 넘겨 처리한 결과를 받아오는 예제이다.

@RestController
public class HelloController {

    @GetMapping("conn_param")
        public Map<String, Object> conn_param(int num, String str) {
            System.out.println("HelloController conn_param() -----" + new Date());
            System.out.println("num : " + num + " str : " + str);

            Map<String, Object> responseMap = new HashMap<>();
            responseMap.put("num", num + 100);
            responseMap.put("str", str + ":processed");

            return responseMap;
        }
}

받아온 num에 100을 더하고, str에는 :processed라는 문자열을 붙여서 내보낸다.

컨트롤러에 RestController 어노테이션이 붙었으므로 결과값인 맵 객체는 Json형식으로 반환되어 프론트로 전달 될 것이다.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
 <script src="https://code.jquery.com/jquery-latest.min.js"></script>
<body>

<button type="button" id="btn">Btn</button>
</body>
<script>
$(document).ready(() => {
    $("#btn").click(function () {
        let frontData = {
            num:12, 
            str:"from front html"
        }
        $.ajax({
            url: "http://localhost:3100/conn_param",
            data:frontData,
            type: "get",
            success: function (res) {
                console.log(res);
            },
            error: function () {
                alert("error");
            }
        });
    });
});
</script>
</html>

결과

{str: 'from front html:processed', num: 112}

추가 : 바닐라 JS를 이용한 통신

function getHuman(){
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){//통신 성공
            alert(this.response);//제이손형태 문자열로 받아진다.
            let human = JSON.parse(this.response);
            console.log(human);
        }
    }
    xhttp.open("GET", "http://localhost:3100/human", true);
    xhttp.send();
}

소스 코드(깃허브)

https://github.com/fkthfvk112/springBoot_practice/tree/main/asyncPrac

저작자표시 비영리 변경금지