230813 GET 요청 데이터 전달 방식

문제

기존 코드

UserController.java

    @GetMapping("/search")
    public ResponseEntity<SearchUserResponseDto> searchUserByUsername(
            @RequestParam("keyword") String keyword
    ) {
        log.info("사용자 찾기 컨트롤러");
        SearchUserResponseDto result = userService.searchUserByUsername(new UserSearchCond(keyword));
        return ResponseEntity.ok().body(result);
    }

index.js

function clickSearchUserIcon() {
    console.log('사용자 검색 클릭');
    let userSearchKeyword = $('#searchKeywordInput').val();
    console.log(userSearchKeyword);

    if (userSearchKeyword.trim() === '') {
        alert('검색어를 입력하세요');
        return;
    }

    let data = {
        keyword: userSearchKeyword
    };

    $.ajax({
        type: "GET",
        url: `/api/users/search`,
        contentType: "application/json",
        data: JSON.stringify(data),
        headers: {
            'Authorization': document.cookie
        },
        success: function (response) {
            console.log('검색 요청 성공');
            console.log(response);
        },
        error: function(response) {
        	console.log('검색 요청 실패');
            console.log(response);
        }
    })
}
       

에러 메세지

invalid character found in the request target
the valid characters are defined in rfc 7230 and rfc 3986

에러메세지 안에 /api/users/search? 라고 뜨며 body에 보낸 data가 암호화 되어 보내졌다는 것을 알 수 있음

해결

UserController.java

    @GetMapping("/search")
    public ResponseEntity<SearchUserResponseDto> searchUserByUsername(
            @RequestParam("keyword") String keyword
    ) {
        log.info("사용자 찾기 컨트롤러");
        SearchUserResponseDto result = userService.searchUserByUsername(new UserSearchCond(keyword));
        return ResponseEntity.ok().body(result);
    }

index.js

$.ajax({
        type: "GET",
        url: `/api/users/search?keyword=${userSearchKeyword}`,
        headers: {
            'Authorization': document.cookie
        },
        success: function (response) {
            console.log('검색 요청 성공');
            console.log(response);
	    },
        error: function (response) {
            console.log('검색 요청 실패');
            console.log(response);
        }
    })

원인

GET 요청은 간단한 데이터를 url에 넣도록 설계된 방식으로 데이터를 보내는 양에 한계가 있음
url 의 길이가 정해져있기 때문에 많은 양의 정보를 전달할 수 없음
url 형식에 맞지 않는 값은 인코딩되어 전달되어야 함

헤더의 내용 중 body의 데이터 타입을 설명하는 content-type 헤더필드도 들어가지 않음

따라서 필요한 데이터가 있다면 QueryParam 을 통해 전달