ejemplos - AngularJS con credenciales

angularjs vs angular

Question

He estado trabajando en un proyecto AngularJS que tiene que enviar llamadas AJAX a un servicio web restfull. Este servicio web está en otro dominio, así que tuve que habilitar cors en el servidor. Hice esto estableciendo estos encabezados:

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

Puedo enviar solicitudes AJAX desde AngularJS al back-end, pero tengo un problema cuando trato de obtener un atributo de una sesión. Creo que esto se debe a que la cookie sessionid no se envía al back-end.

Pude arreglar esto en jQuery estableciendo withCredentials en 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);
}
})
});

El problema que estoy enfrentando es que no puedo hacer que esto funcione en AngularJS con el servicio $ http. Lo intenté así:

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

¿Alguien puede decirme lo que estoy haciendo mal?

Answer 1

Debería pasar un objeto de configuración, como ese

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

o en versiones anteriores:

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

Ver también tu otra pregunta .

Answer 2

En la función de configuración de su aplicación, agregue esto:

$httpProvider.defaults.withCredentials = true;

Agregará este encabezado para todas sus solicitudes.

No te olvides de inyectar $httpProvider

EDITAR: 2015-07-29

Aquí hay otra solución:

HttpIntercepter se puede usar para agregar encabezados comunes y parámetros comunes.

Agregue esto en su configuración:

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

y crear una fábrica con el nombre 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;
}