Very Simple AngularJS $http POST Results in '400 (Bad Request)' and 'Invalid HTTP status code 400'

Question

I have a very simple .NET Web API hosted in Azure, with two very simple methods:

[EnableCors(origins: "http://simpleapiearl.azurewebsites.net", headers: "*", methods: "*")]
public class EnvelopesController : ApiController {
    // GET: api/Envelopes
    public IEnumerable<string> Get() {
        return new string[] { "value1", "value2" };
    }

    // POST: api/Envelopes
    public string Post([FromBody]Envelope env) {
        return "rval: " + env + " (and my addition to env)";
    }
}

I have created a simple plunk to call these methods. In my AngularJS code, I'm making two very simple $http calls. The GET works fine. The POST, however, always returns a "400 (Bad Request)", followed shortly in my WebStorm console by "XMLHttpRequestion cannot load ... Invalid HTTP status code 400".

Any and all suggestions appreciated!

EDIT!!

Hello, and thanks for the very fast responses. I just realized I forgot to add some very relevant detail.

The parameter to my POST method is what I call an Envelope object, which contains two properties: listingId (int) , and Description (string) . When I add the urlencoded Content-Type header, and pass '{"listingId":1234, "Description":"some description"}' as my POST data, the env parameter in my POST method on the server is NULL (that is, it seems unable to parse the JSON I'm providing). Sorry this was omitted from original post.

Answer 1

I think this post would be helpful.

How do I POST urlencoded form data with $http in AngularJS?

By default, the $http service will transform the outgoing request by serializing the data as JSON and then posting it with the content- type, "application/json". When we want to post the value as a FORM post, we need to change the serialization algorithm and post the data with the content-type, "application/x-www-form-urlencoded".

This is the modified plnkr from yours. Your code is missing conversion of JSON to encoded url.

http://plnkr.co/edit/4aeEDz73qgHSfOv1sBgn?p=preview

$http({
    method: 'POST',
    url: 'http://simpleApiEarl.azurewebsites.net/api/envelopes',
    data: env,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
      var str = [];
      for(var p in obj)
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
      return str.join("&");
    }
  }).

Answer 2

I found a blog post that corrected my issue:

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Thanks to everyone for helping me out!

Answer 3

With AngularJS you can do in an easier way.

You can inject $httpParamSerializer and then prepare your data through $httpParamSerializer(data) .

So your call should look something like:

$http({
    method: 'POST',
    url: 'http://simpleApiEarl.azurewebsites.net/api/envelopes',
    data: $httpParamSerializer(env),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  })