프론트에서 Axios를 사용하여 서버에 요청을 할 때, POST, PUT, PATCH 요청의 2번째 인자에 넣은 데이터는 요청의 본문(body)에 데이터로 함께 전송된다.

axios.post(url[, data[, config]])

Axios.post(`/post/like`, { data }, {
    withCredentials: true,
  });

문제점

보통 DELETE나 GET요청 시 query나 params를 사용하여 데이터를 전달하고는 하였는데, 서버에 전달해야 할 데이터의 종류가 많아지면 주소도 복잡해지고 귀찮아진다.

axios.delete(url[, config])

Axios.delete(`/post/like/:postId/:commentId/:recommentId...`, {
    withCredentials: true,
  });

따라서 어떻게 하면 DELETE 또는 GET 요청에서 본문에 데이터를 넣을 수 있는 지 알아보았다.

해결 방법

DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣어주면 된다.

Axios.delete(`/post/like`, {
    data: { // 서버에서 req.body.{} 로 확인할 수 있다.
      postId: ...
      commentId: ...
    },
    withCredentials: true,
  });

References

• javascript — 본문과 헤더가있는 Axios Delete 요청?
• Support delete body · Issue #897 · axios/axios
• Axios - 각각의 요청에 따른 주의사항