反应表达:req.主体未定义

Question

我正试图将新数据推送到后端，但是当我控制日志请求时。Body在我的post方法中，它打印出undefine

下面是推送到后端 的代码

...
constructor(props) {
super(props);
this.state = {
data: []
};
}
addNewItem = () =>{
console.log("addNewItem");

this.state.data.push({
"name":"Tester seven", 
"techs":["React & Redux", "Express", "MySQL"],
"description":"Lore, sed do eiusmod tempor incididunt ut labore et",
"checkin" :"08:00",
"checkout":"19:00",
"type":"Known Blacklisted"
});
fetch('/express_backend_post', {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.state.data)
}).then(res =>{
res.json()
}).then(result =>{
console.log("result ", result);
})
this.state.data.shift();
}

这是我的server.js

const cors = require('cors')
const { json } = require('body-parser')
const express = require('express'); //Line 1
const app = express(); //Line 2
const port = process.env.PORT || 5000; //Line 3
// This displays message that the server running and listening to specified port
app.listen(port, () => console.log(`Listening on port ${port}`)); //Line 6
app.use(cors())
app.use(json({limit:'50mb'}))
// create a POST route
app.post('/express_backend_post', (req, res) =>{
console.log("req ", req.body);

})

在我的节点服务器上，它打印的是undefined。真的需要帮助，知道我哪里错了

Answer 1

问题不仅在于缺少CORS，还在于缺少body-praser。截至express@4.17.1, body-praser已与express捆绑在一起，点击这里了解更多信息。

下面是我的完整的工作服务器。js

var fs = require('fs');
const cors = require('cors')
// function to encode file data to base64 encoded string
function base64_encode(file) {
// read binary data
var bitmap = fs.readFileSync(file);
// convert binary data to base64 encoded string
return new Buffer.from(bitmap).toString('base64');
}
const express = require('express'); //Line 1
const app = express(); //Line 2
const port = process.env.PORT || 5000; //Line 3
// This displays message that the server running and listening to specified port
app.listen(port, () => console.log(`Listening on port ${port}`)); //Line 6

var data = [
{
name: "Tester one",
techs: ["React & Redux", "Express", "MySQL"],
description: "Lorem ipsum doabore et",
checkin: "09:00",
checkout:"18:30",
type:"Known Staff",
image: base64_encode('./src/img/male.png')
},
{
name: "Tester two",
techs: ["React & Redux", "Express", "MySQL"],
description: "Lorem ipsum dolor sit amet, consectetet",
checkin: "09:00",
checkout:"18:30",
type:"Known Blacklisted",
image: base64_encode('./src/img/female.png')
},
{
name: "Tester three",
techs: ["React & Redux", "Express", "MySQL"],
description: "Lorem ipsumabore et",
checkin: "09:00",
checkout:"18:30",
type:"Unknown Visitor",
image: base64_encode('./src/img/blacklist.png')
},
{
name: "Tester four",
techs: ["React & Redux", "Express", "MySQL"],
description: "Lorem ipsum dolor labore et",
checkin: "09:00",
checkout:"18:30",
type:"Known Staff",
image: base64_encode('./src/img/unknown_person.png')
},
{
name: "Tester five",
techs: ["React & Redux", "Express", "MySQL"],
description: "Lorem ipncididunt ut labore et",
checkin: "09:00",
checkout:"18:30",
type:"Known Staff",
image: base64_encode('./src/img/blacklist.png')
},
{
name: "Tester six",
techs: ["React & Redux", "Express", "MySQL"],
description: "Lore, sed do eiusmod tempor incididunt ut labore et",
checkin: "09:00",
checkout:"18:30",
type:"Known Staff",
image: base64_encode('./src/img/unknown_person.png')
}
]
const corsOptions = {
origin: true,
methods: ['GET, POST'],
credentials: true
};
app.use(cors(corsOptions))
app.use(express.urlencoded({limit: '50mb', extended: true}));
app.use(express.json({limit: '50mb'})); // app.use(bodyParser.json())

// create a GET route
app.get('/express_backend', (req, res) => { //Line 9
res.send(data);

});
// create a POST route
app.post('/express_backend_post', (req, res) =>{
req.body[5].image=  req.body[5].image.replace("data:image/png;base64,", "")
data = req.body;
})

如果有更好的方法来优化它或缩短它达到相同的结果，请随时在下面评论，我仍在学习，欢迎任何评论，以提高和成长为一个程序员

Answer 2

很可能是CORS问题。尝试设置Access-Control-Allow-Origin = '*'