AngularJs $http.post() does not send data

Question

Could anyone tell me why the following statement does not send the post data to the designated url? The url is called but on the server when I print $_POST - I get an empty

Answer 1

If using Angular >= 1.4, here's the cleanest solution using the serializer provided by Angular:

angular.module('yourModule')
  .config(function ($httpProvider, $httpParamSerializerJQLikeProvider){
    $httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLikeProvider.$get());
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
});

And then you can simply do this anywhere in your app:

$http({
  method: 'POST',
  url: '/requesturl',
  data: {
    param1: 'value1',
    param2: 'value2'
  }
});

And it will correctly serialize the data as param1=value1¶m2=value2 and send it to /requesturl with the application/x-www-form-urlencoded; charset=utf-8 Content-Type header as it's normally expected with POST requests on endpoints.

TL;DR

During my research I found that the answer to this problem comes in many different flavors; some are very convoluted and depend on custom functions, some depend on jQuery and and some are incomplete in suggesting that you only need to set the header.

If you just set the Content-Type header, the end point will see the POST data, but it won't be in the standard format because unless you provide a string as your data, or manually serialize your data object, it will all be serialized as JSON by default and may be incorrectly interpreted at the endpoint.

e.g. if the correct serializer was not set in the above example, it would be seen in the endpoint as:

{"param1":"value1","param2":"value2"}

And that can lead to unexpected parsing, e.g. ASP.NET treats it as a null parameter name, with {"param1":"value1","param2":"value2"} as value; or Fiddler interprets it the other way, with {"param1":"value1","param2":"value2"} as the parameter name, and null as the value.