$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 :

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.
What is the problem with AngularJS and Restangular that it won't append Content-Type headers to its network calls on GET?
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

Zakaria · Accepted Answer · 2016-01-27 14:01:15Z

4

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

edited Jan 27, 2016 at 14:01

answered Jan 27, 2016 at 11:08

Zakaria

15.1k22 gold badges86 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

yashhy Over a year ago

Yeah, I tried this way too. But when we give a GET request the 'Content-Type' is not appended. May be the angular by default suppresses the 'Content-Type' for GET request!

Zakaria Over a year ago

@yashhy Please, refer to the EDIT and try to add a blank data so that you can force Angular to append the content-type header

yashhy Over a year ago

found the place github.com/angular/angular.js/blob/v1.2.22/src/ng/http.js#L707 here when there is no request data, content-type is deleted :)

yashhy Over a year ago

its works good when we have an empty data on GET, since its now understood that angular strips it out :)

Zakaria Over a year ago

@yashhy Ok. I'm glad it helped. Please, don't forget to check one of the answers that suited your needs.

|

Julian Reschke · Accepted Answer · 2016-01-27 11:25:15Z

3

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

answered Jan 27, 2016 at 11:25

Julian Reschke

42.5k8 gold badges103 silver badges102 bronze badges

4 Comments

yashhy Over a year ago

I'm sure that I wanted to add 'Content-Type' but I agree it is not required for GET. So is that something has to be changed in API side?

Zakaria Over a year ago

Agreed with you. You can set the Accept header on your GET requests so that you force the application/json value. Please check my answer for more details.

Julian Reschke Over a year ago

@yashhy if the API really requires a Content-Type on GET it is broken and you should report a bug.

yashhy Over a year ago

okay thanks for your inputs will check with the APIs. I guess angular by default suppresses the 'Content-Type' for GET request.

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related