ExpressJS 在请求正文不为空时将其显示为空

Question

我有一个网站和一个快速服务器正在运行。 在网站中，用户可以输入他们的用户名和密码。 当他们单击登录按钮时，请求将发送到服务器，请求正文中的用户名和密码为 JavaScript object。

这是网站代码：

<!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。 我是否以错误的方式发送请求？ 我访问请求正文是否错误？

Answer 1

使用xhttp.setRequestHeader("Content-Type", "application/json"); 并尝试再次提出请求。 您的请求标头可能不足以让后端了解您正在发送 json 数据。

Answer 2

在login function 中，您将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)
  }
});

Answer 3

您应该将所有必要的代码包装在login() function 中：获取输入值，初始化 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}`);
  
}

Answer 4

使用 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())

ExpressJS 在请求正文不为空时将其显示为空

问题描述

4 个解决方案

解决方案1
1 2021-06-13 06:54:30

解决方案2
0 2021-06-13 06:16:54

解决方案3
0 已采纳 2021-06-13 09:31:28

解决方案4
0 2021-06-13 10:08:10

ExpressJS 在请求正文不为空时将其显示为空

问题描述

4 个解决方案

解决方案1 1 2021-06-13 06:54:30

解决方案2 0 2021-06-13 06:16:54

解决方案3 0 已采纳 2021-06-13 09:31:28

解决方案4 0 2021-06-13 10:08:10

解决方案1
1 2021-06-13 06:54:30

解决方案2
0 2021-06-13 06:16:54

解决方案3
0 已采纳 2021-06-13 09:31:28

解决方案4
0 2021-06-13 10:08:10