Я пишу программу, которая использует React в качестве внешнего интерфейса и API Express / Node для внутреннего интерфейса, который затем выполняет операции CRUD в базе данных MongoDB. Прямо сейчас я использую собственный JS fetch () API для выполнения операций GET / POST на моем интерфейсе. Запросы GET работают нормально, но мои запросы POST, похоже, не работают. В моем интерфейсе есть форма и обработчик для отправки формы, например:
handleSubmit(){
let databody = {
"name": this.state.nameIn,
"quote": this.state.quoteIn
}
return fetch('http://localhost:5002/stored', {
method: 'POST',
body: JSON.stringify(databody),
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => console.info(data));
}
render(){
return (
<div>
<form onSubmit = {this.handleSubmit}>
<label>
Name
<input type = "text" name = "name" value = {this.nameIn} onChange = {this.handleNameChange}/>
</label>
<label>
quote
<input type = "text" name = "quote" value = {this.quoteIn} onChange = {this.handleQuoteChange}/>
</label>
<input type = "submit" value = "Add to DB" />
</form>
</div>
);
}
Затем в моем Express API, который находится на порту 5002, у меня есть:
app.post('/stored', (req, res) => {
console.info(req.body);
db.collection('quotes').insertOne(req.body, (err, data) => {
if (err) return console.info(err);
res.send(('saved to db: ' + data));
})
});
Однако при отправке формы запрос отображается в API Express с пустым телом. В console.info видно, что req.body - это просто {}. Мне интересно, что я сделал не так?





использовать body-parser
в вашем экспресс-коде добавьте:
global.bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
extended: true,
limit: '50mb',
parameterLimit: 100000
}))
app.use(bodyParser.json({
limit: '50mb',
parameterLimit: 100000
}))
app.post('/stored', (req, res) => {
console.info(req.body);
db.collection('quotes').insertOne(req.body, (err, data) => {
if (err) return console.info(err);
res.send(('saved to db: ' + data));
})
});
в вашем замке:
handleSubmit:function(e){
e.preventDefault();
let databody = {
"name": this.state.nameIn,
"quote": this.state.quoteIn
}
fetch('http://localhost:5002/stored', {
method: 'POST',
body: JSON.stringify(databody),
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => console.info(data));
}
Если вы используете экспресс 4.16 или новее, вы можете просто использовать express.json (), он попытается проанализировать JSON тела запроса и сохранить его в req.body, но только если заголовок Content-Type: application / json отправлен вместе с запрос:
const app = express();
app.use(express.json()); // Parses request body if type is json. Saves to req.body.
Проверьте вкладку сети в консоли разработчика. Эти объекты появляются в вашем теле?