我正在嘗試將新資料推送到后端，但是當我在我的 post 方法中控制臺 log req.body 時，它會列印出 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。真的需要幫助才能知道我哪里出錯了
uj5u.com熱心網友回復：
這很可能是 CORS 問題。嘗試設定Access-Control-Allow-Origin = '*'
uj5u.com熱心網友回復：
問題不僅是因為缺少 CORS，還因為缺少 body-praser。從 [email protected] 開始，body-praser 已經與 express 捆綁在一起，點擊這里了解更多資訊。
下面是我的完整作業 server.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;
})
如果有更好的方法優化或縮短它達到相同的結果，請隨時在下面評論，我仍在學習中，歡迎任何評論以作為程式員改進和成長
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/328293.html