How to send an XML format request in Vue?

Question

I'm trying to use the API for the reservation system the small business I work for uses to improve our Vue website. The API documentation provides the following example request using PHP:

<?php
//Change the following
//
$host = "hostUrl";
$token = "zapiApiToken";
$accountId = "accountId";
$userId = "userId";

$xmlRequest = ("
  <request>
    <zapiToken>$token</zapiToken>
    <zapiAccountId>$accountId</zapiAccountId>
    <zapiUserId>$userId</zapiUserId>
    <zapiMethod>
      <methodName>zapiPing</methodName>
    </zapiMethod>
  </request>
");
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $host);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, ($xmlRequest));

$response = curl_exec ($ch);
curl_close ($ch);

//parse out the XML here, and do stuff
//
echo ("$response");
exit;

The documentation also makes the following points:

• All requests are POST
• All requests are in XML, properly formatted for each function call
• All responses are in XML

How do I replicate this example request in Vue (preferably using Axios, but open to other methods such as XMLHttpRequest)?

So far I have tried the two following methods (with token, userId, accountId, method, url, xml defined as variables):

XMLHttpRequest

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(xhttp.responseText);
  }
};
xhttp.open("POST", url, true);
xhttp.send(xml);

Axios

axios.post(url, xml)
  .then(res => {
    console.log(res);
  })
  .catch(err=>{
    console.log(err)
  })

With both of the above examples the response received is the XML of the baseURL, not the expected response of the zapiPing method.

Thanks in advance!