$http headers is not a function - angularjs

Question

I am posting data to Dynamics CRM via SOAP on my PHP server with cURL. After this is done it is giving the entity GUID in the form of a HTTP Response header. When attempting to access this via my angular factory and $http.

My header is exposed and is able to be viewed in Chrome Developer tools and gives me the GUID I need.

The code for accessing the promise data is as follows:

        $http({
            method: 'POST',
            url: url,
            data: formData,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).success(function (data, headers) {

            var array = [];
            array.data = data;
            array.headers = headers('EntityId');
            console.log(array.headers);

            deferred.resolve(array);
        })

return deferred.promise;

//etc

The error I get is:

headers is not a function()

I can however, access some header result such as a status 200 code by using:

array.headers = headers;

But I need to access my custom header. Any ideas on how I can achieve this?

@Optimistic, did you have to change headers('EntityId') to headers['EntityId'] to make it work? — Abhishek Jain
– Abhishek Jain, Commented Jun 15, 2015 at 13:19
Nope. It still resides as headers('EntityID'). I just had to add status to my $http.post as well as headers. — Optimistic
– Optimistic, Commented Jun 15, 2015 at 13:50
Great. I also found it weird to see that headers is a method. Learnt something new today. :-) — Abhishek Jain
– Abhishek Jain, Commented Jun 15, 2015 at 13:54

dhuyvetter · Accepted Answer · 2015-08-11 20:05:52Z

4

As per Deprecation Notice on https://docs.angularjs.org/api/ng/service/$http

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

the preferred way would be:

$http.get('/someUrl')
.then(function(response){
    var array = [];
    array.data = response.data;
    array.headers = response.headers('EntityId');
});

edited Aug 11, 2015 at 20:05

answered Aug 11, 2015 at 19:57

dhuyvetter

5941 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Jain · Accepted Answer · 2015-06-15 13:53:38Z

As Andy said already, headers is the 3rd parameter of the success callback. So you will have to do this:-

success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  })

I wasn't going to add this as an answer but doing this as I wanted to add that headers is indeed a function.

In my project, I did the below and saw function logged out as type in console. The function returns the value of the header item corresponding to the name passed, if no parameters are passed, returns an object containing all headers.

login(user) {
    return this.$http.post(this.url, user)
        .success((data, status, headers, config) => {
            console.log(typeof headers, 'headers'); => prints function
            console.log(headers(), 'headers'); => if you don't pass anything, returns an object containing all headers.

            return response;
        });
}

Excerpt from the angular code.

function headersGetter(headers) {
var headersObj;

return function(name) {
if (!headersObj) headersObj =  parseHeaders(headers);

if (name) {
  var value = headersObj[lowercase(name)];
  if (value === void 0) {
    value = null;
  }
  return value;
}

return headersObj;
};

Andy Gaskell · Accepted Answer · 2015-06-15 13:19:54Z

2

You parameters for success are incorrect. headers is the third parameter.

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Check "Usage" section in https://docs.angularjs.org/api/ng/service/$http for reference.

edited Jun 15, 2015 at 13:19

answered Jun 15, 2015 at 12:41

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

5 Comments

Abhishek Jain Over a year ago

I also thought headers is not a function, but surprisingly, it is. See my answer below for details.

Andy Gaskell Over a year ago

@AbhishekJain so the correct code would be headers('EntityId')?

Abhishek Jain Over a year ago

Yes, provided EntityId is there in the header. I have tried this by getting Content-type and it works.

Andy Gaskell Over a year ago

Thanks! Will update answer. status must not be a function then.

Abhishek Jain Over a year ago

Yes, OP's code was not working as status was the second parameter and it is not a function.

Ajay Kumar · Accepted Answer · 2016-01-07 05:50:14Z

The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise.

The response object has these properties:

data – {string|Object} – The response body transformed with the transform functions.

status – {number} – HTTP status code of the response.
headers –{function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

Angular version == 1.3.5 , Suppose header value has been set "X-AUTH-TOKEN = 'eyJwYXNzd29yZCI6ImFkbWlu'" in Application Security class after authentication.

$scope.postData = "{\"username\" : username , \"password\": password ,\"email\" :email}";

$http({
            method: 'POST',
            url: '/API/authenticate',
            data: postData,
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
                "X-Login-Ajax-call": 'true'
            }
        })
        .then(function(response) {
            if (response.data == 'ok') {
                $cookies['X-AUTH-TOKEN']=response.headers('X-AUTH-TOKEN');
                // below put,put,putObject Cookies value is valid for Angular version >= 1.4
                // $cookies.putObject('X-AUTH-TOKEN',response.headers('X-AUTH-TOKEN'); 
                window.location.replace('/');
            }
            else {

                // Error Message...
            }
        });

Collectives™ on Stack Overflow

$http headers is not a function - angularjs

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related