Angular 2 http post 作为空对象或在关键端发送
Posted
技术标签:
【中文标题】Angular 2 http post 作为空对象或在关键端发送【英文标题】:Angular 2 http post is sent as empty object or on the key side 【发布时间】:2017-11-05 15:08:48 【问题描述】:我正在尝试将数据从 angular 2 发送到服务器端的节点 js 我的角码是
addCrib(data:any)
let bodyString = data;
let headers = new Headers( 'Content-Type': 'application/json' );
return this.http.post('http://localhost:8000/addcribs',data , headers:headers).map(res => res.json()).subscribe(
data => console.log(data)
);
在服务器端
addcribs: function(req,res)
var x = req.body;
console.log(x); // with application/json and 'data....':'' with application/x-www-form-urlencoded
let crib = new Cribs(id:0, type:req.body.type,price:req.body.price,address:req.body.address,description:req.body.description,bedrooms:req.body.bedrooms,bathroom:req.body.bathroom,area: req.body.area,image:req.body.image);
crib.save(function(err,crib)
if(!err)
res.json(success:true);
)
当我在服务器端 console.log 时,我得到一个空对象 ,当我使用 contentType: application/json 时,当我使用 contentType: application/x-www-form-urlencoded 我得到所有数据对象的关键面,例如。 'type:house':'' 我尝试在客户端的数据上使用 JSON.stringify 但没有帮助
注意我在服务器端使用 cors 依赖
【问题讨论】:
【参考方案1】:由于我无法对 Mahmoud Youssef 的最后一条评论发表评论,所以我正在写这个:
由于您正在处理 JSON 对象,并且希望将它们转换为 url 编码的表单,因此最好执行以下操作:
const body = new URLSearchParams();
//The code below will take any JSON object into URLSearchParams variable, this way you won't need to keep assigning each value manually
//value here refers to a typescript class or json object that you have
Object.keys(value).forEach(key =>
body.set(key, value[key]);
);
然后在发送回服务器时简单地将 body.toString() 作为值发布,确保 json 或 class 对象与服务器接受的匹配
在 angular2 中从 @angular/http 导入 URLSearchParams 非常重要,因为 URLSearchParams 不会在 Microsoft Edge/IE 中定义,见URLSearchParams Browser's compatibility
【讨论】:
【参考方案2】:我找到了答案,我使用了 content-Type: application/x-www-form-urlencoded
并使用:
let urlSearchParams = new URLSearchParams();
urlSearchParams.append('type', data.type);
urlSearchParams.append('bathrooms', data.bathrooms);
let body = urlSearchParams.toString()
urlSearchParams 可以从 Angular 2 中的 http 库导入
【讨论】:
以上是关于Angular 2 http post 作为空对象或在关键端发送的主要内容,如果未能解决你的问题,请参考以下文章
使用 $http.post (angular) 和 bodyparser.text() 发送字符串请求时,请求正文作为对象返回?
Spring Boot + Angular 5 - http.post 空值
在 Angular 中,如何使用 $location.path 作为 $http.post 成功回调进行重定向