I'm trying to figure out why if I use line 24, which the ?access_token included in the URL, everything is fine. But if I try to use the Authorization header on the XMLHttpRequest it get a 403 from api.genius.com

XMLHttpRequest Hell

<script>

// Create the XHR object.
function createCORSRequest(method, url, authorizationToken) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
    xhr.setRequestHeader("Authorization", authorizationToken);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}


// Make the actual CORS request.
function makeCorsRequest() {
  var url = 'https://api.genius.com/songs/378195?access_token=5G4U3tL8_nqFE9Bdj7Blr6-UeUWVkkiQqstOzk946z7Zo9Dgrve4TF3mdXNIK3FU';
//   var url = 'https://api.genius.com/songs/378195';
  var authorizationToken = "Bearer 5G4U3tL8_nqFE9Bdj7Blr6-UeUWVkkiQqstOzk946z7Zo9Dgrve4TF3mdXNIK3FU";

  var xhr = createCORSRequest('GET', url, authorizationToken);
  if (!xhr) {
    alert('CORS not supported');
    return;
  }

  // Response handlers.
  xhr.onload = function() {
    var text = xhr.responseText;
    console.log(text);
  };

  xhr.onerror = function() {
    console.log('Woops, there was an error making the request.');
  };

  xhr.send();
}
makeCorsRequest();
   
</script>