XMLHttpRequest GET call returning 500 error, but curl works

I am trying to retrieve data from an API, but am getting a status 500 error.

I am able to get the data perfectly fine when running this in my terminal:

curl -u myApiKey: https://api.racehero.io/v1/events/38247

but when I try and retrieve it in JavaScript with the given sample code from the API docs I get the status 500 error.
Here is my JavaScript code below, with the only modification to the sample code provided being the added (‘Authorization’, ‘Basic myApiKey’) to the request header.

var XMLHttpRequest = require('xhr2');
var request = new XMLHttpRequest();

request.open('GET', 'https://api.racehero.io/v1/events/38247');
request.setRequestHeader('Authorization', 'Basic myApiKey:');

request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Accept', 'application/json');

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log('Status:', this.status);
    console.log('Headers:', this.getAllResponseHeaders());
    console.log('Body:', this.responseText);
  }
};

request.send();

Any help is appreciated!

I tried doing it in python as well as different calls, but keep running into the same issue.