[Express + Axios] DELETE 요청 시 body에 데이터 넣는 법

문제 발견

여느때처럼 Node.js Express 환경에서 기능 개발을 하고 있었는데

RESTful하게 만들던 와중 delete 요청에 대해 내가 Axios를 통해 보낸 값들이 서버로 전달되지 않는 것을 알았다.

예전에 GET 요청에 대해서도 비슷한 상황을 겪어봤기 때문에

이번에도 DELETE 요청 자체에 문제가 있다는 생각이 들어 PUT 요청으로 바꾼 뒤 다시 테스트를 진행했다. 

결과는 성공. 

 

 

해결책 도출

해결책 1. DELETE 말고 다른 HTTP method 사용

역시 DELETE에 문제가 있어서 그런건 알게 되었지만 그렇다고 RESTful하게 작업중인데 DELETE를 안쓰는 것도 이상하고

PUT 역시 사용하게 될지도 모른다는 생각에 이 방법은 보류하기로 했다.

 

해결책 2. GET 요청때처럼 params로 감싸기

GET 요청때와 마찬가지로 전달할 값들을 params로 감싸 보내봤더니 request.query로 받아지긴 했다.

axios.delete(server_address + '/target', {
    params: {
        id, 
        user_id
    }
}).then((res)=>{

하지만 이럴 경우 body에 담아 보낼 때보다 보안적으로 좋아보이지 않아 이 방법 역시 제외하고 다른 방법을 찾아보았다.

 

해결책 3. data로 감싸기

구글링을 좀 해보니 params로 감싸는 것처럼 data로 감싸면 서버에서 request.body로 받을 수 있다는걸 알았다.

axios.delete(server_address + '/target', {
    data: {
        id, 
        user_id
    }
}).then((res)=>{

테스트해보니 원하던대로 request.body로 받아 데이터처리를 할 수 있었다.

이렇게 문제 해결..을 했지만

 

 

마치며

문제는 해결했지만 머릿속에 의문이 든다. 

POST, PUT, PATCH는 data로 감싸지 않아도 data로 보내지는데 왜 GET, DELETE는 다른걸까?

GET은 그렇다쳐도 DELETE는 왜..?

 

https://axios-http.com/kr/docs/api_intro

Axios API | Axios Docs

공식문서를 참고해봐도 여기선 애초에 POST, PUT, PATCH 요청에 대해선 data로 감싼 후 보내게끔 되어있다. 

다시 구글링 구글링..

 

https://velog.io/@reum107/Axios-delete요청-시-body-안에-값을-넣는-방법과-들어가지-않는-이유

Axios | delete요청 시 body 안에 값을 넣는 방법과 들어가지 않는 이유

이 포스팅을 통해 (+ 그 안의 또 다른 포스팅을 통해) HTTP Spec 상에서 

Delete 요청은 payload body 가 필요가 없다.  Delete 메서드로 payload body를 실어 요청을 하면 요청이 거절될 수 있다.

라는 내용이 있다고 한다. 이에 따라 Axios에서도 마찬가지로 적용하고 있어 안되지 않았을까 추측해본다.

 

 

예전 같았으면 아 data:{} 에 넣으면 되는구나 하곤 해결법만 빠르게 알아내서 해결하고 말았을텐데

이렇게 여러 해결방법을 찾아 최선의 해결방법을 적용하고

안됐던 원인에 대해서는 왜 안됐었는지도 찾아 원리를 이해하는 방법을 통해 

좀 더 개발이 재밌게 느껴지고 다른 문제들을 발견하더라도 해결할 수 있을거 같다는 자신감도 얻게 되어 

이번 포스팅처럼 진행하는게 좋은 프로세스인 것 같다는 생각과

앞으로도 이렇게 해야겠다고 느끼며 포스팅을 마친다. 

 

 

 

그 밖에 도움 받은 블로그

https://velog.io/@bigbrothershin/Axios-delete-요청-시-body에-데이터-넣는-법

Axios - delete 요청 시 body에 데이터 넣는 법