Angular, the content type is not sent using $ http

Question

Angular does not add the correct content type, I tried the following command:

$http({ url: "http://localhost:8080/example/teste", dataType: "json", method: "POST", headers: { "Content-Type": "application/json" } }).success(function(response){ $scope.response = response; }).error(function(error){ $scope.error = error; }); 

In the above code, the following http request is generated:

 POST http://localhost:8080/example/teste HTTP/1.1 Host: localhost:8080 Connection: keep-alive Content-Length: 0 Cache-Control: no-cache Pragma: no-cache Origin: http://localhost:8080 User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31 Content-Type: application/xml Accept: application/json, text/plain, */* X-Requested-With: XMLHttpRequest Referer: http://localhost:8080/example/index Accept-Encoding: gzip,deflate,sdch Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 Cookie: JSESSIONID=C404CE2DA653136971DD1A3C3EB3725B 

As you can see, instead of "application / json" the content type is "application / xml". Did I miss something?

Answer 1

You need to include the body with the request. Angular otherwise deletes the content header.

Add data: '' to the $http argument.

Answer 2

 $http({ url: 'http://localhost:8080/example/teste', dataType: 'json', method: 'POST', data: '', headers: { "Content-Type": "application/json" } }).success(function(response){ $scope.response = response; }).error(function(error){ $scope.error = error; }); 

Try it.

Answer 3

  $http({ method: 'GET', url:'/http://localhost:8080/example/test' + toto, data: '', headers: { 'Content-Type': 'application/json' } }).then( function(response) { return response.data; }, function(errResponse) { console.error('Error !!'); return $q.reject(errResponse); } 

Answer 4

Fine! The solution above worked for me. Had the same problem with calling GET .

  method: 'GET', data: '', headers: { "Content-Type": "application/json" } 

Answer 5

In case this is useful to anyone. For AngularJS 1.5x, I wanted to install CSRF for all requests, and I found that when I did this:

 $httpProvider.defaults.headers.get = { 'CSRF-Token': afToken }; $httpProvider.defaults.headers.put = { 'CSRF-Token': afToken }; $httpProvider.defaults.headers.post = { 'CSRF-Token': afToken }; 

Angular removed the content type, so I had to add this:

 $httpProvider.defaults.headers.common = { "Content-Type": "application/json"}; 

Otherwise, I get media type error 415.

So, I am doing this to configure the application for all requests:

 angular.module("myapp.maintenance", []) .controller('maintenanceCtrl', MaintenanceCtrl) .directive('convertToNumber', ConvertToNumber) .config(configure); MaintenanceCtrl.$inject = ["$scope", "$http", "$sce", "$window", "$document", "$timeout", "$filter", 'alertService']; configure.$inject = ["$httpProvider"]; // configure the header tokens for CSRF for http operations in this module function configure($httpProvider) { const afToken = angular.element('input[id="__AntiForgeryToken"]').attr('value'); $httpProvider.defaults.headers.get = { 'CSRF-Token': afToken }; // only added for GET $httpProvider.defaults.headers.put = { 'CSRF-Token': afToken }; // added for PUT $httpProvider.defaults.headers.post = { 'CSRF-Token': afToken }; // added for POST // for some reason if we do the above we have to set the default content type for all // looks like angular clears it when we add our own headers $httpProvider.defaults.headers.common = { "Content-Type": "application/json" }; } 

Answer 6

Just to show an example of dynamically adding a "Content-type" header for each POST request. In the case when I pass the POST parameters as a query string, this is done using transformRequest. In this case, its value is application / x-www-form-urlencoded .

 // set Content-Type for POST requests angular.module('myApp').run(basicAuth); function basicAuth($http) { $http.defaults.headers.post = {'Content-Type': 'application/x-www-form-urlencoded'}; } 

Then from the interceptor in the request method before returning the configuration object

 // if header['Content-type'] is a POST then add data 'request': function (config) { if ( angular.isDefined(config.headers['Content-Type']) && !angular.isDefined(config.data) ) { config.data = ''; } return config; }