Using AngularJS $http with asp.net webservice, is there a way to set the request headers? - asp.net

Question

I've just come across a bizarre issue with regards to retrieving data via asp.net webservice.
when using JQuery's ajax method the headers are set correctly and the data is retrieved in JSON successfully.
JSON example:
$.ajax({
type: "GET",
url: "service/TestService.asmx/GetTestData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: callback,
error: function (err, xhr, res) {
alert(err);
}
});
The Request Headers for the above is the following:
Accept application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Type application/json; charset=utf-8
Host localhost
Referer http://localhost/
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
X-Requested-With XMLHttpRequest
The Reponse Headers for above is the following:
Cache-Control private, max-age=0
Content-Length 327
Content-Type application/json; charset=utf-8
Date Tue, 29 Oct 2013 17:59:56 GMT
Server Microsoft-IIS/7.5
X-AspNet-Version 4.0.30319
X-Powered-By ASP.NET
this works fine.
But for AngularJS $http method the Request Headers Content-Type value is not set, therefore the Response Headers Content-Type defaults to text/xml; charset=utf-8. Have a look at the example below:
$http({
method : 'GET',
url: 'service/TestService.asmx/GetTestData',
headers: {
'Accept': 'application/json, text/javascript, */*; q=0.01',
'Content-Type': 'application/json; charset=utf-8'
}
}).success(callback);
The Request Headers for above is as follows, you will see that Content-Type is missing:
Accept application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Host localhost
Referer http://localhost/ComponentsAndRepos/
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
therefore the Response Headers for the above is the following:
Cache-Control private, max-age=0
Content-Encoding gzip
Content-Length 341
Content-Type text/xml; charset=utf-8
Date Tue, 29 Oct 2013 17:59:56 GMT
Server Microsoft-IIS/7.5
Vary Accept-Encoding
X-AspNet-Version 4.0.30319
X-Powered-By ASP.NET
therefore this forces the response to return as XML not JSON, is there a way to resolve this?
thank you,
Update
Thanks to Erstad Stephen
This has been resolved by adding data:{} property to $http method.
$http({
method : 'GET',
url: 'service/TestService.asmx/GetTestData',
data: {},
headers: {
'Accept': 'application/json, text/javascript, */*; q=0.01',
'Content-Type': 'application/json; charset=utf-8'
}
}).success(callback);

Answer 1

You can handle this a couple of different ways:
You can set the header defaults through the $httpProvider: http://docs.angularjs.org/api/ng.$http#description_setting-http-headers
You can also use the Interceptors in Angular to intercept the idea for $http to modify the config object for all requests: http://docs.angularjs.org/api/ng.$http#description_interceptors
You could also set the config setting like you are above.
The biggest thing is that you maybe misunderstanding how the config works. See this question here: Angular, content type is not being generated correctly when using resource