ExpressJS shows request body as empty when it isn't empty
Question
I have a website and an express server running. In the website, the user can input their username and password. When they click the login button, the request is sent to the server with the username and password in the request body as a JavaScript object.
Here's the website code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Log In</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Log In</h1>
<div id="i">
<input type="text" name="u" id="u" placeholder="Username">
<input type="password" name="p" id="p" placeholder="Password">
<input type="submit" onclick="login()" value="Log In">
<div id="msg"></div>
</div>
<script src="script.js"></script>
</body>
</html>
JS:
let u = document.getElementById("u");
let p = document.getElementById("p");
let msg = document.getElementById("msg");
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Server request is ready. Press login to send request.")
}
};
//login function triggered when user clicks login
function login() {
data = {
"username": u.value,
"password": p.value
}
xhttp.open("POST", "SERVER_URL", true);
xhttp.send(data)
}
But on the server-side, the request body shows empty:
// environment variables
const client = process.env['MAIN_CLIENT'];
// imports
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
//init
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));//app.use(bodyParser);
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.sendFile(`${__dirname}/index.html`)
})
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", client);
next();
});
app.post(`/data`, (req, res) => {
console.log(req.body)
u = req.body.u;
p = req.body.p;
data = process.env;
console.log("----------------")
if (data[u] == p) {
console.log(`\n-/-/-/-/-/-/-/-/-/-/-/-/\nA user just logged in.\nUsername: ${u}\n-/-/-/-/-/-/-/-/-/-/-//-/ \n`)
res.send(true)
}
else{
console.log("no")
res.send(false)
}
});
app.listen(3000, () => {console.log('ready!')});
Whenever I try to log in, it shows the username as undefined . The request body shows as {} Also, the variable CLIENT is the website URL. Am I sending the request in the wrong way? Am I accessing the request body wrong?
4 answers
solution1
1 2021-06-13 06:54:30
Use xhttp.setRequestHeader("Content-Type", "application/json"); and try making request once again. Your request headers may not be enough for the backend to understand that you are sending json data.
solution2
0 2021-06-13 06:16:54
In the login function, you are sending username and password as a key and accessing wrong keys on the server-side:
app.post(`/data`, (req, res) => {
console.log(req.body)
const { username, password } = req.body;
const data = process.env;
console.log("----------------")
if (data[u] == p) {
console.log(`\n-/-/-/-/-/-/-/-/-/-/-/-/\nA user just logged in.\nUsername: ${u}\n-/-/-/-/-/-/-/-/-/-/-//-/ \n`)
res.send(true)
}
else{
console.log("no")
res.send(false)
}
});
solution3
0 ACCPTED 2021-06-13 09:31:28
- You should wrap all the necessary code in the
login()function: get the input value, init the XMLHttpRequest, send the request - You need to provide the
Content-Typefor the request, it could beapplication/jsonorapplication/x-www-form-urlencodedbecause you've used 2 necessary middlewares on the server-side. In the below code, I use theapplication/x-www-form-urlencodedwhich is described in the document
//login function triggered when user clicks login
function login() {
// get input value
let u = document.getElementById("u").value;
let p = document.getElementById("p").value;
let msg = document.getElementById("msg").value;
// init the request
let xhttp = new XMLHttpRequest();
xhttp.open("POST", "SERVER_URL", true);
// Send the proper header information along with the request
xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhttp.onreadystatechange = function() { // Call a function when the state changes.
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhttp.send(`username=${u}&password=${p}`);
}
solution4
0 2021-06-13 10:08:10
Use JSON.stringify to send data.
function login() {
data = {
"username": u.value,
"password": p.value
}
xhttp.open("POST", "/token", true);
xhttp.setRequestHeader('Content-type', 'application/json');
xhttp.send(JSON.stringify(data))
}
Just one more note, express contains its own parsers, no need to add external parsers.
app.use(express.urlencoded({extended:true}))
app.use(express.json())
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.