express body-parser returns req 对象中的空主体

Question

我是反应和节点的初学者，这将是一个非常基本的问题。我正在创建一个带有节点后端的基本反应。我设置 mysql 数据库连接并全部设置。我想使用 /createUser api 调用插入用户详细信息以将数据存储到数据库中。我运行 server/app.js，react serve 和 index.js 其中包含我的 /createUser 侦听器。当我使用我的表单输入用户名和密码时，空 req.body 对象将在 express.post 方法中返回，而我期待我输入的用户名和密码。在其他情况下，当我启动侦听器时，反应前端不会通过给出以下错误来加载。

GET http://localhost:3000/%PUBLIC_URL%/manifest.json 404（未找到） manifest.json:1 清单：行：1，列：1，意外标记。

节点组件似乎无法访问我的清单文件。我说得对吗？

index.js

const express = require('express');
const bodyParser = require('body-parser');
const store = require('./store');
const app = express();
app.use(express.static('public'));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json({ type: 'application/*+json' }));

app.use(bodyParser.json());

app.post('/createUser', (req, res) => {
    console.log(req.body);
    store
        .createUser({
            username: req.body.username,
            password: req.body.password
        })
        .then(() => res.sendStatus(200))
})

app.listen(3001, () => {
    console.log('Server running on http://localhost:3001')
})

login.js

import React, { Component } from 'react';
import classes from './Login.css';

function post (path, data) {
    console.log(data);
    return window.fetch(path, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
}

function handleLoginClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');

    const Login = document.querySelector('.Login');
    const username = Login.querySelector('.username').value;
    const password = Login.querySelector('.password').value;
    post('/login', { username, password })
        .then(({ status }) => {
            if (status === 200) alert('login success')
            else alert('login failed')
        })
}

function handleSignupClick(e) {
    e.preventDefault();
    console.log('The link was clicked sign up.');

    const CreateUser = document.querySelector('.CreateUser')
    const username = CreateUser.querySelector('.username').value;
    const password = CreateUser.querySelector('.password').value;
    post('/createUser', { username, password })
}


class Login extends Component {

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    render() {
        return (
            <div>
                <form className="Login">
                    <h1>Login</h1>
                    <input type="text" className="username" placeholder="username"/>
                    <input type="password" className="password" placeholder="password"/>
                    <input  type="submit" value="Login" onClick={handleLoginClick}/>
                </form>
                <form className="CreateUser">
                    <h1>Create account</h1>
                    <input type="text" className="username" placeholder="username"/>
                    <input type="password" className="password" placeholder="password"/>
                    <input type="submit" value="Create" onClick={handleSignupClick}/>
                </form>
            </div>
        );
    }

}
export default Login;

我的代码有什么问题？有人可以解释一下吗。

我的代码：https://github.com/indunie/tms2

Answer 1

尝试将 bodyParser 配置替换为以下代码行：

app.use(bodyParser.json({ limit: '100mb' }));
app.use(bodyParser.urlencoded({ limit: '100mb', extended: false }));

这可能对您有所帮助

Answer 2

已解决[https://github.com/expressjs/express/issues/3881][1]

这里有两种解决方案：

将 URL 更改为 http://localhost:3001/manifest.json 以匹配您的 express.static 设置。
将 express.static 更改为 app.use('/public', express.static('public'));，这样 http://localhost:3001/public/manifest.json 将引用给定的文件。

express body-parser returns req 对象中的空主体

express body-parser returns empty body in req object

javascript

node.js

express

reactjs

body-parser