parameters not being passed in to api controller from $http.post

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);
});

I've also tried this variation:

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);

Parameters being passed:

{"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; }
}

Parameter population:

I know it is hard to read but you can see the values I'm passing in are NOT being passed into my newUserRegistration object

I've looked at several questions on Stack that seems to reference this type of issue.

Angular POST to Web API doesn't pass data

issue in Angularjs $http.post to webapi

This project is currently using 1.3.15 - I'm not sure if upgrading to 1.5 help?

What am I missing on this?

UPDATE:

There was a comment that is now gone, but I stringified the data as suggested:

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);

I noticed something strange though. It is calling the API method 2 times, the 1st time has null data (as witnessed originally), but it calls it a 2nd time and the data is there!

I'm not sure why it is being called twice though? Is there anything I'm doing incorrectly now that I'm stringifying the data?

Update to double call:

I noticed the following:

You will notice one says OPTIONS and the other says POST. Now the webAPI also has the following tags:

[HttpPost]
[HttpOptions]

If I removed the Options, it fails (can't find 404). Do these tags have something to do with this?

Check your code to make sure you are not sending it twice. Easy to overlook while you were troubleshooting the problem. — Nkosi, Nov 13 '16 at 03:47
Checking, but it looks like it has something to do with CORS — Nkosi, Nov 13 '16 at 04:19
was the http options there by default or was it added manually by you? — Nkosi, Nov 13 '16 at 04:33
@Nkosi - I must have added. I don't know why, and I don't know what it does. I just know when I take it off, I'm getting a 404 error. — webdad3, Nov 13 '16 at 13:15
Angular may be doing a prefetch and since removing the options causes that to 404 it does not perform the actual call. I am not that versed in angularjs to cannot say for certain. as a work around keep the httpoptions and in the action add a condition to for when the model state is valid. add validation attributes to the model. — Nkosi, Nov 13 '16 at 13:21
yes I think this is a CORs issues now. However, when I start to do some of the suggestions to "fix" the issue it breaks everything :( - It seems that the 1st run through with NULL is something called the "preflight". — webdad3, Nov 13 '16 at 14:02
@Nkosi - I think it is more of a webAPI issue then an Angular issue. — webdad3, Nov 13 '16 at 14:39
Are the hosts for the angular site and the api site different? For example the api is http://localhost:17438 and the angular site is 'http://localhost:17499 — Kent Cooper, Nov 19 '16 at 03:58

score 1 · Answer 1 · answered Nov 13 '16 at 03:54

Use JSON.stringify() to wrap your 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);

score 0 · Answer 2 · answered Nov 18 '16 at 20:40

As you're finding out, this is a web server issue more than an Angular one.

If your angular app is delivered on the same server:port as your service endpoints, try using a relative hyperlink and see if the OPTIONS request disappears. The presence of the domain name in a XmlHttpRequest for the application/json content-type is usually enough to trigger the CORS check.

I will say that I've seen this much more frequently when connecting to IIS, but it's not exclusive. A lot depends on the underlying server config. The OPTIONS request is like the handshake for SSL: the angular request is trying to figure out what the system will allow, then sending the payload once permissions are granted.

MDN - Access Control with CORS

score 0 · Answer 3 · answered Nov 19 '16 at 04:13

Remove this:

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

You are telling the api server you are going to send it a form encoded body and you are instead sending it a JSON body and so when the api server goes to parse the body of the request it is null.

NOTE: If you are using Asp.Net Web Api's built in OAuth provider then you will need to post to the /token method using the application/x-www-form-urlencoded data type but for all other calls you can use JSON.

As for the duplicate requests that is caused by your browser making a CORS check. That is perfectly normal if your API hostname is different from you angular hostname.

parameters not being passed in to api controller from $http.post

3 Answers3