我有一个网站和一个express服务器在运行。在网站中，用户可以输入他们的用户名和密码。当他们单击登录按钮时，请求将被发送到服务器，请求主体中的用户名和密码将作为JavaScript对象。
这是网站代码：
<!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)
}
但在服务器端，请求正文显示为空：
// 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!')});
每当我尝试登录时，它都会将用户名显示为undefined。请求正文显示为{}此外，变量CLIENT是网站URL。我发送请求的方式不对吗？我访问请求正文是否错误？
使用xhttp.setRequestHeader("Content-Type", "application/json");并再次尝试发出请求。您的请求头可能不足以让后端理解您正在发送json数据。
- 您应该在
login()函数中包装所有必要的代码：获取输入值，初始化XMLHttpRequest，发送请求 - 您需要为请求提供
Content-Type，它可以是application/json或application/x-www-form-urlencoded，因为您在服务器端使用了2个必要的中间件。在下面的代码中，我使用文档中描述的application/x-www-form-urlencoded
//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}`);
}
在login函数中，您将username和password作为密钥发送，并在服务器端访问错误的密钥：
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)
}
});
使用JSON.stringify发送数据。
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))
}
再注意一点，express包含自己的解析器，不需要添加外部解析器。
app.use(express.urlencoded({extended:true}))
app.use(express.json())