How to Use Custom HTTP Verbs in Axios

This guide explains how to configure the Axios HTTP client to execute non-standard or extended HTTP methods such as PROPFIND, REPORT, MKCOL, or PURGE. While Axios includes convenient helper functions for common operations like axios.get() or axios.post(), it also supports arbitrary HTTP methods through its core request configuration, making it fully compatible with protocols like WebDAV and CalDAV.

Using the Generic Request Method

Axios accepts any valid string as an HTTP verb via the method property inside the generic axios(config) or axios.request(config) methods.

To execute a PROPFIND request:

import axios from 'axios';

async function fetchDirectoryDetails() {
  try {
    const response = await axios({
      method: 'PROPFIND',
      url: 'https://example.com/remote.php/webdav/',
      headers: {
        'Depth': '1',
        'Content-Type': 'application/xml; charset=utf-8',
      },
      data: `<?xml version="1.0" encoding="utf-8" ?>
        <D:propfind xmlns:D="DAV:">
          <D:prop>
            <D:displayname/>
            <D:getcontentlength/>
          </D:prop>
        </D:propfind>`,
    });

    console.log(response.status);
    console.log(response.data);
  } catch (error) {
    console.error('Request failed:', error);
  }
}

Similarly, executing a REPORT request follows the same pattern:

async function queryCalendarReport() {
  const response = await axios({
    method: 'REPORT',
    url: 'https://example.com/caldav/user/calendar/',
    headers: {
      'Depth': '1',
      'Content-Type': 'application/xml; charset=utf-8',
    },
    data: `<c:calendar-query xmlns:d="DAV:" xmlns:c="urn:ietf:params:xml:ns:caldav">
      <d:prop>
        <d:getetag />
        <c:calendar-data />
      </d:prop>
      <c:filter>
        <c:comp-filter name="VCALENDAR" />
      </c:filter>
    </c:calendar-query>`,
  });

  return response.data;
}

TypeScript Configuration

In TypeScript projects, standard Axios types might constrain the method property to a union of standard HTTP verbs (GET, POST, PUT, DELETE, etc.). To pass custom verbs without compilation errors, type-cast the method or extend the configuration:

import axios, { AxiosRequestConfig, Method } from 'axios';

const config: AxiosRequestConfig = {
  method: 'PROPFIND' as Method,
  url: 'https://example.com/webdav/',
  headers: { Depth: '0' },
};

axios.request(config)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Creating a Dedicated Client Instance

If your application frequently communicates with a server requiring custom methods, create a reusable Axios instance configured with the necessary base URLs and default headers:

import axios from 'axios';

const webdavClient = axios.create({
  baseURL: 'https://example.com/webdav/',
  headers: {
    'Content-Type': 'application/xml; charset=utf-8',
  },
});

// Helper for PROPFIND
export const propfind = (url, data, headers = {}) => {
  return webdavClient({
    method: 'PROPFIND',
    url,
    data,
    headers,
  });
};

// Helper for REPORT
export const report = (url, data, headers = {}) => {
  return webdavClient({
    method: 'REPORT',
    url,
    data,
    headers,
  });
};