[Web] html form 태그에서 PUT, DELETE 사용

1. client - html form 태그

REST API 를 설계하다보면 필요에 따라 GET, POST 뿐만 아니라 PUT 과 DELETE 메서드를 사용해야 하는 경우가 있다. 그러나 form 태그에서는 기본적으로 GET, POST 방식만 지원한다. 그렇기 때문에 PUT, DELETE 메서드를 사용하기 위해서는 다음과 같이 hidden input 라인을 추가해주어야 한다.

 

<form action="/target/api" method="POST">
	<input type="hidden" name="_method" value="DELETE"/>
</form>

이 방법은 약간의 꼼수인데, 위와 같이 hidden input 의 value 에 사용하고자 하는 메서드를 입력하여 form 태그 내부에 숨겨서 전송을 하는 것이다.

thymeleaf 템플릿을 사용하는 경우에는 다음과 같이 구현할 수 있다.

 

<form action="#" th:action="/target/api" method="#" th:method="delete">
	...
</form>

 

thymeleaf 는 따로 hidden input 태그를 추가하지 안하도 자동으로 추가해주기 때문에 th:method 에 put 이나 delete 와 같이 사용하고 싶은 메서드의 이름을 추가하면 된다.


2. server - HiddenHttpMethodFilter

위와 같이 단순히 hidden input 태그를 추가한다고 바로 REST API 에서 PUT 과 DELETE 를 사용할 수는 없다.

앞서 설명에서 말한 것과 같이 이 방법은 꼼수이다. form 태그에서 지원해주지 않는 메서드 방식을 input 태그에 숨겨서 전송하기 때문에 이를 받아서 사용하는 서버에도 추가 작업이 필요하다. 만약 따로 추가 작업 없이 통신을 수행하면 해당 요청은 form 태그에서 선언한대로 GET 이나 POST 로 전송되어서 알맞은 API 를 찾지 못하게 된다.

서버에서는 HiddenHttpMethodFilter 를 사용하여 hidden 타입의 input 태그 속성들을 필터링해준다. 이때 각 요청의 HTTP 메서드를 읽어서 PUT, DELETE 등으로 변경을 해준다.

따로 HiddenHttpMethodFilter 를 Bean 으로 등록해주어 사용해도 되지만, Spring boot 를 사용하는 경우에는 appliaction.properties 에 다음 라인을 추가하여 hiddenmethod filter 를 true 로 설정해줄 수 있다.

 

spring.mvc.hiddenmethod.filter.enabled=true

 

 

[reference]
- https://stackoverflow.com/questions/24256051/delete-or-put-methods-in-thymeleaf
- https://docs.spring.io/spring-framework/docs/current/reference/html/web.html#mvc-rest-method-conversion
- https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/filter/HiddenHttpMethodFilter.html