XMLHTTPREQUEST Keeps Returning Empty Line When I Send A Request

I am trying to make a login function where it filters through the rest api. The API itself works on localhost and when I enter the local host address(http://localhost:3000/config/username) myself in a browser it works completely fine, but when I try to access it via XMLHTTPREQUEST it keeps returning an empty line. I have tried many things, but it either returns undefined, null, a CORS error, or just doesn't do anything at all.

My Javascript Code Is:

async function getLogin(){
  console.log('------')
  let usernameElement = document.querySelector('#username')
  let passwordElement = document.querySelector('#password')
  const url = `http://localhost:3000/config/${usernameElement.value}`
  try {
    const request = new XMLHttpRequest()
    request.open("GET", url, true);
    let jsonResponse;
    request.send()
    request.onload = function(){
      jsonResponse = request.response
    };
    alert(request.response)
  } catch(err){
    alert(err)
  }
}

And my html is

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0">
  <link rel="stylesheet" href="css/form.css">
  <script src="scripts/login.js"></script>
  <title>Game Login</title>
  <link rel="icon" href="../tools/images/favicon.ico" type="image/x-icon">
</head>
<body>
  <section>
    <h1>Login</h1>
    <form>
      <div class="input-group">
        <input type="text" id="username" class="input" required>
        <label class="input-label">Username</label>
      </div>
      <div class="input-group">
        <input type="password" id="password" class="input" required>
        <label class="input-label">Password</label>
      </div>
      <input type="submit" onclick="getLogin()" class="submit">
    </form>
  </section>
  <div class="bottom">
    <p>Don't have an account? Click here to register</p>
    <a href="register.html">REGISTER</a>
  </div>
</body>

</html>

I have been checking the documentation, looking at other questions in stack overflow and much more, but I can't seem to find an apparent answer to this.

EDIT

I managed to sort of get it to work, but now in order for the results to show, you have to ctrl click submit instead of click it regularly and I am completely confused as to why. One thing that I noticed was that every time you submit it adds this weird ? at the end of the url (eg: file:///filepath/index.html?) and I think that this is causing problems in some way but I don't know how. The current code I am using is

async function getLogin(){
  console.log('------')
  let usernameElement = document.querySelector('#username')
  let passwordElement = document.querySelector('#password')

  if (usernameElement.value == '' | passwordElement.value == '') {
    alert('Error, no username/password given');
    return;
  }
  const url = `http://localhost:3000/config/${usernameElement.value}`
  try {
    const request = new XMLHttpRequest()
    request.open("GET", url, true);
    let jsonResponse;
    request.send()
    request.onload = function(){
      jsonResponse = request.response
      alert(request.response)
    };
  } catch(err){
    alert(err)
  }
}

Also I updated it so it now sends cors headers in my server.js file so now I am no longer getting cors errors. I am really confused as to why I have to ctrl click to get the alert, and about the extra question mark. If anyone has answers to this please tell me.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/x9p2GDY