Mam uruchomioną stronę internetową i serwer ekspresowy. W serwisie użytkownik może wprowadzić swoją nazwę użytkownika i hasło. Po kliknięciu przycisku logowania żądanie jest wysyłane do serwera z nazwą użytkownika i hasłem w treści żądania jako obiekt JavaScript.

Oto kod strony:

<!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)
}

Ale po stronie serwera treść żądania pokazuje puste:

// 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!')});

Za każdym razem, gdy próbuję się zalogować, wyświetla się nazwa użytkownika jako undefined. Treść żądania jest wyświetlana jako {} Ponadto zmienna CLIENT to adres URL witryny. Czy wysyłam prośbę w niewłaściwy sposób? Czy mam nieprawidłowy dostęp do treści żądania?

0
potato 13 czerwiec 2021, 08:57

4 odpowiedzi

Najlepsza odpowiedź
  • Powinieneś zapakować cały potrzebny kod w funkcję login(): pobierz wartość wejściową, zainicjuj XMLHttpRequest, wyślij żądanie
  • Musisz podać Content-Type dla żądania, może to być application/json lub application/x-www-form-urlencoded, ponieważ użyłeś 2 niezbędnych programów pośredniczących po stronie serwera. W poniższym kodzie używam application/x-www-form-urlencoded, który jest opisany w dokument
//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}`);
  
}
0
Đăng Khoa Đinh 13 czerwiec 2021, 14:19

W funkcji login wysyłasz username i password jako klucz i uzyskujesz dostęp do błędnych kluczy po stronie serwera:

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)
  }
});
0
Apoorva Chikara 13 czerwiec 2021, 06:16

Użyj JSON.stringify do wysyłania danych.

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))
}

Jeszcze jedna uwaga, express zawiera własne parsery, nie ma potrzeby dodawania zewnętrznych parserów.

app.use(express.urlencoded({extended:true}))
app.use(express.json())
0
ak100 13 czerwiec 2021, 10:08

Użyj xhttp.setRequestHeader("Content-Type", "application/json"); i spróbuj ponownie wysłać prośbę. Twoje nagłówki żądania mogą nie wystarczyć, aby backend zrozumiał, że wysyłasz dane json.

1
Sanket Vyawahare 13 czerwiec 2021, 06:54