使用 Express/Node 和 MongoDB 响应 POST 请求

IT技术 node.js mongodb reactjs express crud
2021-05-09 11:47:01

我正在编写使用 React 作为前端的程序，并为后端编写一个 Express/Node API，然后在 MongoDB 数据库中执行 CRUD 操作。现在，我正在使用本机 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.log(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>
    );
}

然后在端口 5002 上的 Express API 上，我有：

app.post('/stored', (req, res) => {
    console.log(req.body);
    db.collection('quotes').insertOne(req.body, (err, data) => {
        if(err) return console.log(err);
        res.send(('saved to db: ' + data));
    })
});

但是，当提交表单时，请求会显示在 Express API 上，但正文为空。console.log 显示 req.body 只是一个 { } 我想知道我做错了什么？

2个回答

利用 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.log(req.body);
    db.collection('quotes').insertOne(req.body, (err, data) => {
        if(err) return console.log(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.log(data));
}

如果您使用 express 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.
其它你可能感兴趣的问题
上一篇React Apollo 和 Redux：将自定义减速器与 Apollo 状态相结合 下一篇用于 @types/react-router 的 Typescript 自定义 @types 包