CODEWITHSUNDEEP
angularjshttphttp-headershttp-getrestangular
yashhy
yashhy

Reputation: 3096

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

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 :

enter image description here

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 :

enter image description here

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.

enter image description here

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 :

enter image description here

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

Upvotes: 2

Views: 2351

Answers (2)

Zakaria
Zakaria

Reputation: 15070

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 JSONdata.

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

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'
});

Upvotes: 4

Julian Reschke
Julian Reschke

Reputation: 42035

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"?

Upvotes: 3

Related Questions