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: \"         


        

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("&");
    }
  }).