在学习VUE的过程中,自己简单的学习了一下后端node,写了一个简单的后端服务器,前端和后端是跨域的,但是学习到axios的post请求时,一直后端获取不到值,不知道为什么,每次请求过后多一个空的body对象
app.use('/postcomment/', function (req, res) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
var content=req
console.log(content)
var user_name=req.body.artid
console.log(user_name)
fs.readFile('./comments1.json', function (err, data) {
if (err) {
console.error(err);
return;
}
var person = data.toString();
person = JSON.parse(person);
res.send(person)
res.end();
});
})
前端VUE 的axios
postComment() {
// 校验是否为空
if(this.msg.trim().length===0){
return Toast('评论内容不能为空!');
}
this.$ajax({
method: "post",
url: "/postcomment/",
data: {
artid: this.id,
content: this.msg.trim()
}
}).then(response=>{
console.log(response.data);
if(response.data.status===0){
var cmt={user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()
}
this.comments.unshift(cmt);
this.msg=""
}
}).catch(error => {
console.log(error);
Toast({
message: "增加评论失败..."
});
});
}
最后查了好久好久,发现是在req对象中多了这个body
[Symbol(outHeadersKey)]:
[Object: null prototype] {
'x-powered-by': [Array],
'access-control-allow-origin': [Array],
'access-control-allow-headers': [Array],
'access-control-allow-methods': [Array] } },
body: {} }
于是想到是不是跨域增加头部的原因
app.use('/postcomment/', function (req, res) {
var content=req
console.log(content)
var user_name=req.body.artid
console.log(user_name)
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
fs.readFile('./comments1.json', function (err, data) {
if (err) {
console.error(err);
return;
}
var person = data.toString();
person = JSON.parse(person);
res.send(person)
res.end();
});
})
遂改成这样,测试,解决,
虽然看似是个简单的问题,但是对于我这个新手,node也是略懂,真的是困扰了好半天