POST 请求错误抛出 404 与 node.js 服务器和反应应用程序

Question

我正在从事 Udemy 的 Full Stack Web 开发人员课程的最后一个项目，但我在连接前端和后端时遇到了困难。 我在发出登录请求时收到 404，我不确定为什么。 我需要提及的关于 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 && 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 请求抛出一个未找到的消息，我不确定为什么。 我认为可能是 JSON 解析问题，但我认为这不是问题所在。 此外，我在 por 3001 上运行我的前端，在端口 3000 上运行我的后端。在尝试将应用程序与服务器连接之前，我尝试使用 Postman 检查我的服务器并且它工作正常，但我知道它不是，如果我输入的密码不正确。 我也收到 404 而不是我的 400 和 console.log 错误？ 也许有人可以在这里阐明一些信息？ 谢谢！

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