[ERROR] Request method 'DELETE' not supported 해결 / AXBoot 목록 삭제 기능 구현

yesjm·2021년 5월 5일
1

프로그램 목록의 항목을 선택하고 삭제 버튼을 클릭했을 때 해당 항목을 삭제하는 기능을 구현하고자 했다.

구현

먼저 내가 구현한 컨트롤러와 서비스단, 삭제 버튼을 클릭했을 때의 동작이다.

  • 컨트롤러
  • 서비스
  • js

해당 코드를 작성하고 삭제 버튼을 클릭했을 때 Request method 'DELETE' not supported 오류가 발생했다. swagger에서 컨트롤러를 테스트 했을 때는 삭제가 잘 되었기때문에 의문이었다.

해당 오류를 검색해보니 application.properties에 hiddenmethod를 true로 해라, web.xml에 filter를 추가해라,, 등의 조언을 얻을 수 있었지만 나의 상황에는 맞지 않는 방법이었다.


수정

  • 컨트롤러
    @PathVariable Long id@RequestParam List<Long> ids로 변경(삭제할 항목을 리스트로 받아오기 위해)

  • 서비스
    리스트를 for문을 돌아 해당 항목을 삭제하는 메소드를 호출하도록 수정

  • js
    data로 값을 넘기던 거을 삭제하고 url을 url: '/api/v1/_education/yesjmgridform, 에서 url: '/api/v1/_education/yesjmgridform?ids=' + ids.join(','), 로 수정했다.
    삭제 버튼을 클릭시 dialog를 출력하고, 삭제할 데이터가 있는지 확인하는 코드가 추가됐고 선택된 목록의 id 목록을 배열로 처리하는 코드도 추가됐다.

문제가 있었던 이유는 라우팅 규칙에 의해 data가 아닌 url로 값을 던저야 기능이 정상적으로 동작하기 때문이다. 따라서 url에 선택된 id 값들을 넘겨 해당 오류가 해결되었다.
id값이 [1, 2, 3]일 경우 /api/v1/_education/yesjmgridform?ids=1,2,3으로 값이 전달되고 컨트롤러에서 해당 값을 자동으로 리스트로 인식하게 된다.

결과


@RequestParam / @PathVariable

오류가 생겼을 때는 @PathVariable 어노테이션 때문에 문제가 생겼나 했지만 결국 라우팅 규칙에 의해 문제가 있었다는 것을 알게 됐다.

@ParhVariable 어노테이션은 문제가 없다는 것을 알았고 @RequestParam보다 깔끔한 url을 만들 수 있다고 하니 이용해 보도록 하자.

@PathVariable에 value={} 안에 적은 변수명을 name에 똑같이 적어주고 js코드의 url을 url: '/api/v1/_education/yesjmgridform/' + ids.join(','),로 수정해주면 기존보다 깔끔한 url이 출력된 것을 확인할 수 있다.

profile
yesjm의 개발블로그~

0개의 댓글