$http header 'Content-Type' not appending in the header - AngularJS

Question

I'm using $http to do a GET request and I wanted to append 'Content-Type': 'application/json' in the header. If I don't append this header 415 (Unsupported Media Type) error is thrown.

I'm using Apache 2.2.13 with ProxyPass, in which I DO NOT say RequestHeader append Content-Type "application/json" . However if I put the RequestHeader configuration in apache $http.get works fine and the 'Content-Type' is also appended.

Scenario 1 : Using $http , trying GET request

Request :

$http({
    method: 'GET',
    headers: { 'Content-type': 'application/json'},
    url: '/items/?customerId=5656'
});

Chrome Network Tab :

---

Scenario 2 : Using Restangular , trying the same GET request

Request :

Restangular.setDefaultHeaders({'Content-Type': 'application/json'})
Restangular.setBaseUrl('/items')
Restangular.all('').getList({customerId: '103020'}, {'Content-Type': 'application/json'});

Chrome Network Tab :

The other interesting part here is, when I do some mistakes on the Request Header like,
Restangular.setDefaultHeaders({'Contentttt-Type': 'application/json'}) and try Scenario 1, I notice the following in the Chrome Network Tab.

---

Scenario 3 : Using jQuery ajax, trying the same GET request

Request :

$.ajax({
         url: "/items/?customerId=103020",
         type: "GET",
         beforeSend: function(xhr){xhr.setRequestHeader('Content-Type', 'application/json');},
         success: function() { alert('Success!'); }
      });

Chrome Network Tab :

Questions :

1. Is it necessary to add RequestHeader append Content-Type "application/json" in Apache configuration? But if I add that I get 415 errors on POST requests.
2. What is the problem with AngularJS and Restangular that it won't append Content-Type headers to its network calls on GET ?
3. What is the best solution to solve this? I have tried out all the combinations but no luck!

Versions :

Angular : 1.2.22

Restangular : 1.4.0

Answer 1

On the one hand, with the $http service, you can override or add your headers using $httpProvider when calling the config method on your module :

module.config(function($http) {
  $httpProvider.defaults.headers.get = { 'Content-Type : 'application/json' };
});

On the other hand, with the GET method, if your API is really RESTFull, only the Accept header should be set since you are not sending JSON data.

Thus, use the above code for your PUT / POST methods and force the Accept header for the GET method:

module.config(function($http) {
$httpProvider.defaults.headers.post = { 'Content-Type : 'application/json'};
$httpProvider.defaults.headers.put = { 'Content-Type : 'application/json'};
$httpProvider.defaults.headers.get = { 'Accept : 'application/json'};
});

EDIT 1:

If you want to force the content-type in a GET request, you have to add a blank data :

$http({
    method: 'GET',
    data:'',
    dataType:'json',
    headers: { 'Content-type': 'application/json'},
    url: '/items/?customerId=5656'
});

Answer 2

Setting a Content-Type header field on an HTTP request that doesn't have a request body (such as GET) is non-sense.

Maybe what you really want is set "Accept"?