[에러 핸들링] 배송지 삭제 오류 수정 / 코드 수정

 

문제 상황 : 
시큐리티 엑세스 거부 오류

 

header에 아래 코드 추가 안함.

<meta name="${_csrf.token }" content="${_csrf.token }">

 

csrf 토큰 설정이 초기와 바뀌었음

headers : {
            'X-CSRF-TOKEN' : '${_csrf.token }' 
    	},

 

토큰 설정은 해결했는데 REST 컨트롤러 이해가 부족했을 프로젝트 초기에 delete 인데 

@PostMapping 으로 설정 type: post 으로 해놔서 이것도 싹 바꿔보기로 함

 

기존 코드 (Delivery/deliveryUpdate.jsp) :  

 

<!-- 삭제 버튼 -->
<form id="deleteForm" action="delete" method="post">
    <input type="hidden" id="deliveryId" name="deliveryId" value="${delivery.deliveryId}">
    
    <button type="button" id="deleteButton">삭제</button>
</form>

<script>
    // 삭제 버튼 클릭 시 삭제 동작 실행
    $(document).ready(function() {
        $("#deleteButton").click(function() {
            var deliveryId = $("#deliveryId").val();
            const memberId = '${memberDetails.getUsername() }';

            // 배송지 삭제를 위한 Ajax 요청
            $.ajax({
                url: "delete"
                headers : {
    				'X-CSRF-TOKEN' : $('meta[name="${_csrf.parameterName }"]').attr('content')
    			},
                type: "POST",
                data: { deliveryId: deliveryId },
                success: function(data) {
                    // 삭제 성공 시 페이지 새로고침 또는 다른 동작 수행
                	window.location.href = "../Delivery/deliveryAddressList";
                },
                error: function(xhr, status, error) {
                    // 삭제 실패 시 에러 처리
                    console.error("배송지 삭제 실패:", error);
                }
            });
        });
    });
</script>

 

수정 코드 (Delivery/deliveryUpdate.jsp) : 

 

<!-- 삭제 버튼 -->
<form id="deleteForm" action="delete" method="post">
    <input type="hidden" id="deliveryId" name="deliveryId" value="${delivery.deliveryId}">
    
    <button type="button" id="deleteButton">삭제</button>
</form>

<script>
    // 삭제 버튼 클릭 시 삭제 동작 실행
    $(document).ready(function() {
        $("#deleteButton").click(function() {
            var deliveryId = $("#deliveryId").val();
         
            // 배송지 삭제를 위한 Ajax 요청
            $.ajax({
                url: "delete/" + deliveryId,
                headers : {
                	'X-CSRF-TOKEN' : '${_csrf.token }' 
    			},
                type: 'DELETE',
                success: function(response) {
                	
                	if(response === 1){
                    	// 삭제 성공 시 페이지 새로고침 또는 다른 동작 수행
                		window.location.href = "../Delivery/deliveryAddressList";               		
                	}else{
                		// 삭제 실패 시 에러 메시지 출력
                        console.error("배송지 삭제 실패");
                        alert("배송지 삭제 실패");
                	}
                },
                error: function(xhr, status, error) {
                	// Ajax 요청 실패 시 에러 처리
                    console.error("배송지 삭제 실패:", error);
                    alert("배송지 삭제 중 오류가 발생했습니다.");
                }
            });//end ajax
        }); //end click event handler
    }); //end document.ready function
</script>

 

 

기존 코드 :

Ajax 요청 URL 및 메서드:
URL: "delete"
메서드: POST​

 

post 메서드를 사용해서 delete URL에 대한 요청을 보냈으며,
데이터는 {deliveryId : deliveryId} 형식으로 전송했다.

현재 코드 :

Ajax 요청 URL 및 메서드:
URL: "delete/" + deliveryId
메서드: DELETE​

 

RESTful한 방식을 따라 delete 메서드를 사용하고 URL에 '/deliveryId'를 추가하여
특정 배송지를 삭제하는 것을 명시적으로 표시했다.

- CSRF 토큰 처리 
기존 코드 : ${_csrf.parameterName}과 ${_csrf.token}을 사용해서 CSRF 토큰을 가져왔다.
현재 코드 : 'X-CSRF-TOKEN': '${_csrf.token }'을 사용해서 직접 CSRF 토큰 값을 지정해서 보냈다.

- Ajax 성공 콜백 
기존 코드 : 단순히 페이지를 새로고침하여 처리
현재 코드 : 서버에서 반환하는 response 값을 통해 삭제 성공 여부를 판단하고, 그에 따른 알림 처리를 수행한다

 

 

기존 코드 (DeliveryRESTController.java) :

 

// 배송지 수정 페이지에서 deliveryId로 삭제
	@PostMapping("/delete")
	public ResponseEntity<Integer>deleteDelivery(@Param("deliveryId")int deliveryId){
		int res = deliveryService.deleteDelivery(deliveryId);
		log.info(res + "행 삭제");
		return new ResponseEntity<Integer>(res,HttpStatus.OK);
	}

 

 

현재 코드 (DeliveryRESTController.java) :

 

// 배송지 수정 페이지에서 deliveryId로 삭제
	@DeleteMapping("delete/{deliveryId}")
	public ResponseEntity<Integer>deleteDelivery(@PathVariable int deliveryId){
		int res = deliveryService.deleteDelivery(deliveryId);
		log.info(res + "행 삭제");
		if(res == 1) {
			log.info("배송지 삭제 성공");
			return new ResponseEntity<>(res,HttpStatus.OK);
		}else {
			 log.error("배송지 삭제 실패");
		     return new ResponseEntity<>(res, HttpStatus.BAD_REQUEST);
		}
	}//end deleteDelivery()

 

- HTTP 메서드 
기존 코드 : @PostMapping을 사용하여 HTTP POST 메서드를 사용했음
현재 코드 : RESTful API 원칙에 맞춰 @DeleteMapping을 사용해 HTTP DELETE 메서드를 명시적으로 사용

- 응답처리 
기존코드 : 삭제 성공 여부와 상관없이 항상 HttpStatus.OK를 반환
현재코드 : 삭제 성공 시 HttpStatus.OK를 반환 하고, 실패 시 HttpStatus.BAD_REQUEST를 반환하여 클라이언트에게 더 정확한 상태를 전달하고 있음

- 코드의 명확성
현재 코드는 삭제 연산의 결과에 따라 세밀하게 처리하고 있어 코드의 명확성과 디버깅 용이성이 향상되었다.
삭제 성공 및 실패에 대한 로깅도 명시적으로 수행하고 있다.

 

 

수정 후 실행 결과  

 

배송지 관리 페이지

 

 

삭제 버튼 클릭

 

 

삭제 성공 시 '배송지 목록' 페이지로 이동

 

 

콘솔 창