axios delete 요청에 data 보내는 방법

axios 라이브러리는 편의를 위해 다음과 같이 http 메소드의 별칭을 제공한다. 

 

axios.get(url[, config])            
axios.post(url[, data[, config]])   
axios.put(url[, data[, config]])    
axios.patch(url[, data[, config]])  
axios.delete(url[, config])

 

여기에서 마지막 delete 요청을 보면 post 요청과 달리 두번째 인자가 data가 아닌 config이다. 하지만 config 설정 옵션을 통해서도 서버에 data를 실어 보내는 방법이 있다.

 

다음은 Oauth 구현 과제에서 클라이언트 화면에 있는 로그아웃 버튼을 눌렀을 때 로컬 서버에 accessToken을 같이 보낸 다음, 로컬 서버에서 resource server(과제에서는 GitHub)에 accessToken, userId, password와 함께 사용자의 권한 부여를 취소하는 delete 요청을 보내는 로직 플로우에서 클라이언트의 로그아웃 버튼 핸들러 함수이다.

 

  const logoutHandler = async () => {
    await axios.delete("http://localhost:4000/logout", {
      data: { accessToken },
    });
    setGithubUser(null);
    setServerResource(null);
    setAccessToken("");
    setIsLogin(false);
  };

axios.delete()의 두번째 인자에 {accessToken}을 바로 보내면 로컬 서버에서 req.body를 받을 때 undefined가 뜬다. { data: {accessToken} } 으로 보내야 req.body에 액세스 토큰이 담긴다. 

 

axios 러닝 가이드에는 이렇게 data: {} 로 config에 데이터를 실어보내는 것이 요청 메소드 'PUT', 'POST' 및 'PATCH' 에만 적용 가능하다고 나와 있는데, axios 공식문서에는 Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'라고 나와 있다. 실제로 위의 코드로 서버에 데이터를 보낼 수 있었다. axios 러닝 가이드가 공식 문서의 번역본인데 공식 버전이 아닌 개인이 운영하는 깃헙 링크인 듯 하다.

 

 

 

📚 참고자료

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

API | Axios 러닝 가이드