AngularJS withCredentials

Question

J'ai travaillé sur un projet AngularJS qui doit envoyer des appels AJAX à un webservice. Ce webservice est sur un autre domaine donc j'ai dû activer les cors sur le serveur. Je l'ai fait en mettant ces en-têtes:

cresp.getHttpHeaders().putSingle("Access-Control-Allow-Origin", "http://localhost:8000"); 
cresp.getHttpHeaders().putSingle("Access-Control-Allow-Credentials", "true"); 
cresp.getHttpHeaders().putSingle("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); 
cresp.getHttpHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With"); 

Je suis en mesure d'envoyer des requêtes AJAX de AngularJS au back-end mais je suis face à un problème lorsque je tente d'obtenir un attribut d'une session. Je crois que c'est parce que le cookie sessionid n'est pas envoyé au backend.

J'ai été en mesure de résoudre ce problème dans jQuery en définissant withCredentials sur true.

$("#login").click(function() { 
    $.ajax({ 
     url: "http://localhost:8080/api/login", 
     data : '{"identifier" : "admin", "password" : "admin"}', 
     contentType : 'application/json', 
     type : 'POST', 
     xhrFields: { 
      withCredentials: true 
     }, 
     success: function(data) { 
      console.log(data); 
     }, 
     error: function(data) { 
      console.log(data); 
     } 
    }) 
}); 

$("#check").click(function() { 
    $.ajax({ 
     url: "http://localhost:8080/api/ping", 
     method: "GET", 
     xhrFields: { 
      withCredentials: true 
     }, 
     success: function(data) { 
      console.log(data); 
     } 
    }) 
}); 

Le problème que je suis face est que je ne peux pas obtenir ce travail dans AngularJS avec le service http $. Je l'ai essayé comme ceci:

$http.post("http://localhost:8080/api/login", $scope.credentials, {withCredentials : true}). 
      success(function(data) { 
       $location.path('/'); 
       console.log(data); 
      }). 
      error(function(data, error) { 
       console.log(error); 
      }); 

Quelqu'un peut-il me dire ce que je fais mal?

Answer 1

Vous devez passer un objet de configuration, comme si

$http.post(url, {withCredentials: true, ...}) 

ou dans les anciennes versions:

$http({withCredentials: true, ...}).post(...) 

Voir aussi your other question.

Answer 2

Dans votre fonction de configuration app ajouter ceci:

$httpProvider.defaults.withCredentials = true; 

Il ajoutera cet en-tête pour toutes vos demandes.

Ne pas oublier d'injecter $httpProvider

EDIT: 2015-07-29

Voici une autre solution:

HttpIntercepter peut être utilisé pour ajouter des en-têtes communs, ainsi que des paramètres communs.

Ajouter dans votre config:

$httpProvider.interceptors.push('UtimfHttpIntercepter');

et créer l'usine avec le nom UtimfHttpIntercepter

angular.module('utimf.services', []) 
    .factory('UtimfHttpIntercepter', UtimfHttpIntercepter) 

    UtimfHttpIntercepter.$inject = ['$q']; 
    function UtimfHttpIntercepter($q) { 
    var authFactory = {}; 

    var _request = function (config) { 
     config.headers = config.headers || {}; // change/add hearders 
     config.data = config.data || {}; // change/add post data 
     config.params = config.params || {}; //change/add querystring params    

     return config || $q.when(config); 
    } 

    var _requestError = function (rejection) { 
     // handle if there is a request error 
     return $q.reject(rejection); 
    } 

    var _response = function(response){ 
     // handle your response 
     return response || $q.when(response); 
    } 

    var _responseError = function (rejection) { 
     // handle if there is a request error 
     return $q.reject(rejection); 
    } 

    authFactory.request = _request; 
    authFactory.requestError = _requestError; 
    authFactory.response = _response; 
    authFactory.responseError = _responseError; 
    return authFactory; 
}