javascript - express body-parser 在 req 对象中返回空正文
问题描述
我是反应和节点的初学者,这将是一个非常基本的问题。我正在创建一个带有节点后端的基本反应。我设置了mysql数据库连接并设置好了。我想使用 /createUser api 调用插入用户详细信息以将数据存储到数据库。我运行 server/app.js、react serve 和 index.js,其中包含我的 /createUser 监听器。当我使用我的表单输入用户名、密码时,空的 req.body 对象将在 express.post 方法中返回,而我期待输入的用户名和密码。在其他情况下,当我启动侦听器时,通过给出以下错误来响应前端未加载。
GET http://localhost:3000/%PUBLIC_URL%/manifest.json 404 (Not Found) manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token。
似乎节点组件无法访问我的清单文件。我对么?
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')
})
登录.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;
我的代码有什么问题?有人可以解释一下吗。
解决方案
尝试将 bodyParser 配置替换为以下代码行:
app.use(bodyParser.json({ limit: '100mb' }));
app.use(bodyParser.urlencoded({ limit: '100mb', extended: false }));
这可能会帮助你
推荐阅读
- dialogflow-es - 如何在 dialogFlow 中构建一系列是/否问题?
- node.js - 在 .env 文件中存储私有值是否安全?
- java - 使用递归方法在java中打印文本
- java - facing error while unmarshaling from sml to java
- sql - SQL在同一张表上选择两个相同的列但具有不同的ORDER
- angular - After upgrading to Angular 9, problem with the command "ng lint --fix"
- asp.net-web-api - Web API Clear Button
- python - After Add New model.How to Django Table Migrate without losing data
- shell - `command > output` 和 `command 2>&1 > output` 有什么区别?
- android - How can I prevent closing app when I double-click fast in Android?