Ik heb aan een AngularJS-project gewerkt dat AJAX-aanroepen naar een rustgevende webservice moet sturen. Deze webservice bevindt zich op een ander domein, dus ik moest cors inschakelen op de server. Ik deed dit door deze headers in te stellen:

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

Ik kan AJAX-verzoeken van AngularJS naar de backend sturen, maar ik heb een probleem wanneer ik een attribuut van een sessie probeer te krijgen. Ik denk dat dit komt omdat de sessionid-cookie niet naar de backend wordt verzonden.

Ik heb dit kunnen oplossen in jQuery door withCredentials in te stellen op 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);
        }
    })
});

Het probleem waar ik tegenaan loop is dat ik dit niet werkend krijg in AngularJS met de $http-service. Ik heb het als volgt geprobeerd:

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

Kan iemand me vertellen wat ik verkeerd doe?

Antwoord 1, autoriteit 100%

Je zou een configuratie-object moeten doorgeven, zoals zo

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

of in oudere versies:

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

Zie ook je andere vraag.

Antwoord 2, autoriteit 73%

Voeg dit toe aan uw app-configuratiefunctie:

$httpProvider.defaults.withCredentials = true;

Het zal deze kop aan al uw verzoeken toevoegen.

Vergeet niet $httpProvider

te injecteren

BEWERK: 29-07-2015

Hier is een andere oplossing:

HttpIntercepter kan worden gebruikt voor het toevoegen van gemeenschappelijke headers en gemeenschappelijke parameters.

Voeg dit toe aan je configuratie :

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

en maak een fabriek met de naam 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;
}

Antwoord 3

Verduidelijking:

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

zou moeten zijn

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

volgens https://docs.angularjs.org/api/ng/ service/$http