Войдите в систему с помощью Node и React

#node.js #reactjs #express #fetch

#node.js #reactjs #экспресс #извлечение

Вопрос:

Я создаю очень простой логин с помощью React и Node как часть школьного задания, аутентификация не требуется. Это мой код:

Server.js

 app.post('/auth', function (request, response) {
   var username = request.body.username;
   var password = request.body.password;
   
   if (username amp;amp; password) {
      response.redirect('/home');
   } else {
      response.send('Please enter Username and Password!');
      response.end();
   }
});

и это мой интерфейс

Loggin.js

 handleLogin = () => {
   const { username, password } = this.state;

   const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
         user: {
            username: username,
            password: password
         }
      })
   };

   fetch('http://localhost:8080/auth', requestOptions)
      .then(response => response.json())
      .then(data => {
         console.log(data.success)
         if (data.success) {
            window.location = "/home";
         }
      });
}

Но не работает. Когда я утешаю.имя пользователя и пароль в журнале указаны как неопределенные

Я пытался найти решение, прежде чем публиковать здесь, но я не могу его найти, и я не знаю, что я делаю не так.

Любая помощь будет оценена.

Ответ №1:

Проблема в том, что интерфейс отправляет тело типа:

 body = {
    user: {
        username: 'value',
        password: 'value'
    }
}

но на серверной части вы читаете username и password непосредственно из body объекта. Либо обновите свою серверную логику, чтобы:

 app.post('/auth', function(request, response) {
   var username = request.body.user.username;
   var password = request.body.user.password;

   if (username amp;amp; password) {
           response.redirect('/home');
   } else {
       response.send('Please enter Username and Password!');
       response.end();
   }
});

или ваш интерфейс для:

 body: JSON.stringify({
     username: username,
     password: password
});

Ответ №2:

Ваше приложение react ожидает ответа в формате JSON, но получает обычный текст. попробуйте что-то вроде

  response.json({error: 'Please enter Username and Password!'});