Блог

Главная - Вопросы по программированию - Ошибка POST-запроса, вызывающая 404 с node.js сервер и приложение react

Ошибка POST-запроса, вызывающая 404 с node.js сервер и приложение react

#javascript #node.js #reactjs #api #express

#javascript #node.js #reactjs #API #экспресс

Вопрос:

Я работаю над финальным проектом из курса веб-разработчика полного стека Udemy, и я застрял при подключении моего интерфейса и серверной части. Я получаю 404 при отправке post-запроса для входа в систему, и я не уверен, почему. Вещи, которые я должен упомянуть о server.js:

  • Фактической базы данных нет, мы вызываем массив объектов в одном и том же server.js файл
  • Пока я пытаюсь протестировать только первый элемент массива (на случай, если вам интересно, почему я использую database.user[0] .

Теперь вот server.js код:

 const express = require('express');
const bcrypt = require('bcrypt-nodejs');
const cors = require('cors');

const app = express();
app.use(express.json());
app.use(cors());
const database = {
    users: [
        {
            id: '123',
            name: 'John',
            email: 'john@gmail.com',
            password: 'cookies',
            entries: 0,
            joined: new Date()
        },
        {
            id: '124',
            name: 'Sally',
            email: 'sally@gmail.com',
            password: 'bananas',
            entries: 0,
            joined: new Date()
        }
    ]
}

app.get('/',(req, res)=>{
    res.send(database.users);
});

app.post('/signin', (req, res) =>{
    if(req.body.email === database.users[0].email amp;amp;
        req.body.password === database.users[0].password){
            res.json('success');
        } else {
            res.status(400).json('error logging in');
        }
})

app.post('/register', (req, res) =>{
    const { email, name, password } = req.body;
    bcrypt.hash(password, null, null, function(err, hash) {
        console.log(hash);
        // Store hash in your password DB.
    });
    database.users.push({
            id: '125',
            name: name,
            email: email,
            password: password,
            entries: 0,
            joined: new Date()
    })
    res.json(database.users[database.users.length-1]);
})

app.get('/profile/:id', (req, res) => {
    const { id } = req.params;
    let found = false;
    database.users.forEach(user => {
        if(user.id === id) {
            found = true;
           return res.json(user);
        } 
    })
    if(!found){
        res.status(400).json('not found');
    }
})

app.post('/image', (req, res)=>{
    const { id } = req.body;
    let found = false;
    database.users.forEach(user => {
        if(user.id === id) {
            found = true;
            user.entries  ;
           return res.json(user.entries);
        } 
    })
    if(!found){
        res.status(400).json('not found');
    }
})

app.listen(3000, () => {
    console.log('app is running on port 3000');
});

И вот мой Signin.js компонент. Я не думаю, что вам нужно видеть App.js файл, поскольку он имеет только изменения маршрута onSubmit. Также я не вставляю фактический знак в форму, отображаемую в этом Signin.js файл, чтобы сделать его проще.

 import React from 'react';

class Signin extends React.Component {
  constructor(props){
    super(props);
    this.state={
      signInEmail: '',
      signInPassword: ''
    }
  }
  onEmailChange = (event) => {
    this.setState({signInEmail : event.target.value})
  }

  onPasswordChange = (event) => {
    this.setState({signInPassword: event.target.value})
  }
  onSubmitSignIn = () => {
    fetch('http://localhost:3001/signin', {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        email: this.state.signInEmail,
        passworrd: this.state.signInPassword
      })
    })
  
    this.props.onRouteChange('home');
   
  }

Итак, запросы GET работают нормально, запрос POST входа выдает сообщение not found, и я не уверен, почему. Я подумал, что, возможно, проблема с синтаксическим анализом JSON, но я не думаю, что это проблема. Кроме того, я запускаю свой интерфейс на порте 3001, а серверную часть — на порту 3000. Я попытался проверить свой сервер с помощью Postman, прежде чем пытаться подключить приложение к серверу, и оно работало нормально, но знайте, что это не так! Если я неправильно ввожу пароль, я также получаю 404 вместо моих 400 и консоли.ошибка журнала. Может быть, кто-нибудь может пролить некоторый свет здесь? Спасибо!

Комментарии:

1. Вы проверили порт?

2. ваш /signin порт находится на 3000 в соответствии с вашим кодом — ваш код запрашивает порт 3001

3. Вы проверяли, есть ли какие-либо данные, отправленные или нет с вашим запросом на выборку? с помощью консоли запрошенные данные на обоих концах.

4. @xMayank да, это не так.

5. @SachinKumar спасибо, сейчас это работает, просто добавлено событие.preventDefault(); в функции onSubmitSignIn

Ответ №1:

Я думаю, вам не хватает этих двух вещей:-

Вы добавили body-parser в наше приложение?? (Содержит пары ключ-значение данных, представленных в теле запроса. По умолчанию оно не определено и заполняется при использовании промежуточного программного обеспечения для анализа тела, такого как body-parser)

 const app = express();

var bodyParser = require('body-parser');

app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

Я также замечаю в вашем Signin.js компонент (проверьте правильность написания пароля)

 onSubmitSignIn = () => {
    fetch('http://localhost:3001/signin', {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        email: this.state.signInEmail,
        passworrd: this.state.signInPassword // it should be password not passworrd
      })
    })
  
    this.props.onRouteChange('home');
}

Комментарии:

1. Я не использую синтаксический анализатор тела, поскольку у express теперь есть эта функция. Действительно, пароль был введен неправильно, но это было не так! Я добавил event.preventDefault(); а также я пропустил запятую, по-видимому, в функции stringify! Теперь это работает. Большое спасибо!