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
Comments
Post a Comment