XMLHttpRequest only reaches readystate 1 even though the response is sent

Question

I am trying to send an httprequest to a node server I have set up in app.js. There is a specific endpoint defined in app.js called allSnippets that works as intended when I run http://localhost:3000/allSnippets but when I create a button in an html file that should send a XMLHttpRequest to app.js/allSnippets, the readystate never gets past 1. Overall, I'd like to reach readystate 4 and process the response but have opted for changing the color of "Hi" to test which readystate I am reaching because I never received any response. This html file is located in a directory called 'public'. The directory containing 'public' also contains app.js.

<p id = "text">Hi</p>
<button type = "button" onclick = "displaySnips()">View snippets</button>
<script>
  function displaySnips() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState == 2){
        document.getElementById("text").style.color = 'red';
      }
      else if (this.readyState == 1){
        document.getElementById("text").style.color = 'blue';
      }
      else if (this.readyState == 3){
        document.getElementById("text").style.color = 'green';
      }
      else if (this.readyState == 4 && this.status == 200) {
        document.getElementById("text").style.color = 'white';
      }
    }
    xhttp.open("GET", "../app.js/allSnippets", true);
    xhttp.send();
  }
</script>

Any ideas as to why I am not reaching readystate 4?