将AngularJS $ http与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 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:

1. You can set the header defaults through the $httpProvider: http://docs.angularjs.org/api/ng .$http#description_setting-http-headers
2. 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
3. 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