[英]express body-parser returns empty body in req object
I am a beginner to react and node and this will be a very basic problem. 我是一个反应和结点的初学者,这将是一个非常基本的问题。 I am creating a basic react fronted with a node backend.
我正在创建一个带有节点后端的基本反应。 I setup mysql database connection and all set.
我设置mysql数据库连接并全部设置。 I want to insert user details using /createUser api call to store data to database.
我想使用/ createUser api调用插入用户详细信息,以将数据存储到数据库。 I run the server/app.js, react serve and index.js which contained my listener for /createUser.
我运行server / app.js,react serve和index.js,其中包含我的/ createUser侦听器。 When I input username,password using my form, empty req.body object will be returned in express.post method while I am expecting the username and password I entered.
当我使用表单输入用户名,密码时,在期望输入的用户名和密码的同时,express.post方法中将返回空的req.body对象。 In other case, when I start the listener, react front is not loading by giving the error below.
在其他情况下,当我启动侦听器时,通过以下错误给出响应前端未加载的信息。
GET http://localhost:3000/%PUBLIC_URL%/manifest.json 404 (Not Found) manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token. GET http:// localhost:3000 /%PUBLIC_URL%/ manifest.json 404(未找到)manifest.json:1清单:第1行:第1列:1,意外令牌。
It seems like node component cannot access my manifest file. 看来节点组件无法访问我的清单文件。 Am I correct?
我对么?
index.js 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 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;
What's wrong with my code? 我的代码有什么问题? Can someone please explain me.
有人可以解释一下吗。
my code : https://github.com/indunie/tms2 我的代码: https : //github.com/indunie/tms2
Try to replace bodyParser configuration to following lines of code: 尝试将bodyParser配置替换为以下代码行:
app.use(bodyParser.json({ limit: '100mb' }));
app.use(bodyParser.urlencoded({ limit: '100mb', extended: false }));
This might help you 这可能对您有帮助
solved [ https://github.com/expressjs/express/issues/3881][1] 解决了[ https://github.com/expressjs/express/issues/3881][1]
There are two solutions here: 这里有两种解决方案:
http://localhost:3001/manifest.json
to match how you have express.static
setup. http://localhost:3001/manifest.json
以匹配您的express.static
设置。 express.static
to app.use('/public', express.static('public'));
express.static
更改为app.use('/public', express.static('public'));
such that http://localhost:3001/public/manifest.json
will refer to the given file. http://localhost:3001/public/manifest.json
将引用给定的文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.