参数没有从$ http.post传递到api控制器

Question

AngularJS：

$http.defaults.headers.post["Content-Type"]= "application/x-www-form-urlencoded";

$http({
    url: 'http://localhost:17438/api/people/PostPerson/',
    method: "POST",
    data: { name: vm.parent[i].name, dob: '01/15/2001', email: vm.parent[i].email, phone: vm.parent[i].cell, carrierName: vm.parent[i].carrier, personTypeID: 1 }
})
.then(function (response) {
    // success
    alert('sucess : ' + response);
},
function (response) { // optional
    // failed
    alert('failure : ' + response);
});

我也尝试过这种变化：

var data = { name: vm.parent[i].name, dob: '01/15/2001', email: vm.parent[i].email, phone: vm.parent[i].cell, carrierName: vm.parent[i].carrier, personTypeID: 1 };
$http.post('http://localhost:17438/api/people/PostPerson/', data);

传递的参数：

{"name":"jv","dob":"01/15/2001","email":"j@live.com","phone":"5551212","carrierName":"Sprint","personTypeID":1}:

的WebAPI：

[HttpPost]
[HttpOptions]
public string PostPerson(newUserRegistration newReg)
{
    var json = JsonConvert.SerializeObject(0);
    person myPerson = new person();
    myPerson.personName = newReg.name;
    myPerson.personEmail = newReg.email;
    myPerson.personPhone = newReg.phone;
    myPerson.personPhoneCarrier = newReg.carrierName;
    myPerson.personDOB = newReg.dob;
    myPerson.familyID = newReg.familyID;
    myPerson.personTypeID = newReg.personTypeID;

    db.people.Add(myPerson);
    db.SaveChanges();

    return "got here";
}

public class newUserRegistration
{
    public string name { get; set; }
    public string email { get; set; }
    public string phone { get; set; }
    public string carrierName { get; set; }
    public DateTime dob { get; set; }
    public string registrationID { get; set; }
    public int familyID { get; set; }

    public int personTypeID { get; set; }
}

参数人口：

我知道它很难读，但你可以看到我传入的值没有被传递到我的newUserRegistration对象

我在Stack上看了几个似乎引用这类问题的问题。

Angular POST to Web API doesn't pass data

issue in Angularjs $http.post to webapi

这个项目目前正在使用1.3.15 - 我不确定升级到1.5是否有帮助？

我对此缺少什么？

更新

现在有评论消失了，但我按照建议对数据进行了字符串化：

var data = JSON.stringify({ name: vm.parent[i].name, dob: '01/15/2001', email: vm.parent[i].email, phone: vm.parent[i].cell, carrierName: vm.parent[i].carrier, personTypeID: 1 });

$http.post('http://localhost:17438/api/people/PostPerson/', data);

我注意到了一些奇怪的事情。它调用API方法2次，第1次有空数据（最初见过），但它第二次调用它，数据就在那里！

我不确定为什么它会被调用两次？现在我正在做错的事情，因为我正在对数据进行字符串化吗？

更新为双重通话：

我注意到以下情况：

您会注意到一个说OPTIONS而另一个说POST。现在webAPI还有以下标记：

[HttpPost]
[HttpOptions]

如果我删除了选项，则会失败（找不到404）。这些标签是否与此有关？

Answer 1

使用JSON.stringify()包装你的json

var url = 'http://localhost:17438/api/people/PostPerson/';
var data = JSON.stringify({ name: vm.parent[i].name, dob: '01/15/2001', email: vm.parent[i].email, phone: vm.parent[i].cell, carrierName: vm.parent[i].carrier, personTypeID: 1 });
$http.post(url, data);

Answer 2

正如您所知，这是一个Web服务器问题而不是Angular问题。

如果您的角度应用程序在同一服务器上提供：端口作为服务端点，请尝试使用相对超链接查看OPTIONS请求是否消失。在应用程序/ json内容类型的XmlHttpRequest中存在域名通常足以触发CORS检查。

我会说在连接到IIS时我已经更频繁地看到了这一点，但它并不是唯一的。很大程度上取决于底层服务器配置。 OPTIONS请求就像SSL的握手一样：角度请求试图找出系统允许的内容，然后在授予权限后发送有效负载。

MDN - Access Control with CORS

Answer 3

删除它：

$http.defaults.headers.post["Content-Type"]= "application/x-www-form-urlencoded";

你告诉api服务器你要发送一个表单编码的正文，而你发送它是一个JSON正文，所以当api服务器去解析请求的主体时它是null。

注意：如果您使用的是Asp.Net Web Api内置的OAuth提供程序，那么您需要使用application / x-www-form-urlencoded数据类型发布到/ token方法，但是对于您可以使用的所有其他调用JSON。

对于您的浏览器进行CORS检查而导致的重复请求。如果您的API主机名与您的角度主机名不同，那就完全正常了。