Embedded form: $http GET request does not contain Authorization header

Camunda 7 Topics Discussion & Questions
,
1

Hi all,

I’m trying to make a (GET) request using $http in an embedded form:

inject(['$http', function($http) {
    $http({
        method: 'GET',
        url: 'urlString',
        headers: {
            'Authorization': 'sessionId'
        }
    }).
    then(function successCallback(response) {
        // do something with the response           
    },
    function errorCallback(response) {
        // do something with the response
    });
}]);

Now, what I can see in the developer tools is an OPTIONS request, which returns 200, but not the actual GET request. Furthermore the OPTIONS request doesn’t contain the Header “Authorization”, I think this is the reason why the GET request doesn’t get sent?!

I was also trying to set “Authorization” header through $httpProvider following this documentation, but without success:
https://docs.angularjs.org/api/ng/service/$http#setting-http-headers

inject(['$httpProvider', '$http',  function($httpProvider, $http) {
    $httpProvider.defaults.headers.common.Authorization = sessionId;
    
    $http({
        method: 'GET',
        url: 'urlString'
    }).
    then(function successCallback(response) {
        // do something with the response           
    },
    function errorCallback(response) {
        // do something with the response
    });
}]);

For this I got the following error message, when I was trying to start the BP:

Form failure: [$injector:unpr] Unknown provider: $httpProviderProvider <- $httpProvider http://errors.angularjs.org/1.2.29/$injector/unpr?p0=%24httpProviderProvider%20<-%20%24httpProvider

What I don’t understand is, the following code is working:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'urlString', true);

xhr.onload = function() {
    // do something with the response
};
xhr.onerror = function() {
    // do something with the response
}

xhr.setRequestHeader('Authorization', sessionId);
xhr.send();

Also from the documentation of AngularJS:

The $http service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP.
For me this sounds like $http makes use of XMLHttpRequest in the end, so I don’t understand why the request with $http doesn’t work :confused:

Does someone have an idea what the reason could be?

2

The main reason why I want to use $http instead of XMLHttpRequest is to make use of the feature Interception of 401 (unauthorized) of the Authentication module descripted here:

So that in case I receive a 401 (Unauthorized) response from my back-end I can redirect the user to the login screen instead of showing blank fields in my form, because the request failed to fetch the data.

3

I found a way to make use of the feature of the Authentication module in an embedded form using XMLHttpRequest :slight_smile: :

inject(['$rootScope', function($rootScope) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'urlString', true);

    xhr.onload = function() {
        if(xhr.status == 401)
        {
            var error = {};
            error.status = 401;
        
            $rootScope.$broadcast('httpError', error); // Triggers the event handler in the authentication module
        }
        // do something with the response
    };
    xhr.onerror = function() {
        // do something with the response
    }

    xhr.setRequestHeader('Authorization', sessionId);
    xhr.send();
}]);

But the question why I cannot make requests with $http is still open :confused:

Best regards
Marvin

4