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.