Angular, le type de contenu n'est pas envoyé avec $http

Question

Angular n'ajoute pas l'option de type de contenu correcte, j'ai essayé la commande suivante :

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

Le code ci-dessus génère la requête http suivante :

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

Comme vous pouvez le constater, au lieu de "application/json", le type de contenu est "application/xml". Est-ce que j'ai oublié quelque chose ici ?

Answer 1

Vous devez inclure un corps avec la requête. Sinon, Angular supprime l'en-tête de type de contenu.

Ajoutez data: '' à l'argument de $http.

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

Essayez comme ça.

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('Erreur !!');
                    return $q.reject(errResponse);
                }

Answer 4

Génial! La solution donnée ci-dessus a fonctionné pour moi. J'avais le même problème avec un appel GET.

 méthode: 'GET',
 données: '',
 en-têtes : {
        "Content-Type": "application/json"
 }

Answer 5

Si cela peut être utile à quelqu'un. Pour AngularJS 1.5x, je voulais définir CSRF pour toutes les requêtes et j'ai trouvé que lorsque j'ai fait ceci :

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

Angular a supprimé le type de contenu, donc j'ai dû ajouter ceci :

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

Sinon, j'ai une erreur de type de média 415.

Je configure donc mon application pour toutes les requêtes de la manière suivante :

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 les jetons d'en-tête pour CSRF pour les opérations http dans ce module
function configure($httpProvider) {

    const afToken = angular.element('input[id="__AntiForgeryToken"]').attr('value');

    $httpProvider.defaults.headers.get = { 'CSRF-Token': afToken }; // ajouté uniquement pour GET
    $httpProvider.defaults.headers.put = { 'CSRF-Token': afToken }; // ajouté pour PUT
    $httpProvider.defaults.headers.post = { 'CSRF-Token': afToken }; // ajouté pour POST

    // pour une raison quelconque, si nous faisons ce qui précède, nous devons définir le type de contenu par défaut pour tous 
    // il semble qu'angular l'efface lorsque nous ajoutons nos propres en-têtes
    $httpProvider.defaults.headers.common = { "Content-Type": "application/json" };

}