How to send a custom header on every request with an angular resource?

Question

I like to send a custom header on every request with an angularjs resource. Before every request the header has to be created again. The following doesn't work. The header is calculated only once and because of this only one request works. A second request on the same resource fails. Its a lot of copy n paste of "headers: authhandler.createHeader()" also ...

myApp.service('Rest', ['$resource', 'authhandler',
        function($resource, 'authhandler',{
            return {
                User: $resource( api_domain + "/api/users/:userid", {}, {
                    get: {method: 'GET', headers: authhandler.createHeader()},
                    remove: {method: 'DELETE', headers: authhandler.createHeader()},
                    edit: {method: 'PUT', headers: authhandler.createHeader()},
                    add: {method: 'POST', headers: authhandler.createHeader()},
                    patch: {method: 'PATCH', headers: authhandler.createHeader()}
                }),
            };
        }]);

Has someone an idea how to solve this ? I had a working solution but I don't like it because of huge amount of copy and paste source code:

myApp.controller('MyController', function(RestResource, authhandler, $routeParams) {
    $http.defaults.headers.common = authhandler.createHeader();
    RestResource.get({userid: $routeParams.id}, function(result) {
        //...
    });
});

I Would be very happy about hints how to solve this ! Thanks in advance!

I don't think you need to configure the $http default headers each time, it is a global parameter. Just add it at the beginning of your application, or where it is supposed to change. — tomaoq
– tomaoq, Commented Nov 21, 2014 at 10:34
@lechariotdor: Thanks for your reply, but the header has different parameters for each request. So it should be recalculated each time ... — Oliver13
– Oliver13, Commented Nov 21, 2014 at 10:37

a better oliver · Accepted Answer · 2014-11-21 11:33:53Z

4

You can use a request transformer:

function($resource, 'authhandler',{
   return {
        User: $resource( api_domain + "/api/users/:userid", {}, {
            get: {
                  method: 'GET',
                  transformRequest: function(data, headersGetter) {
                    var currentHeaders = headersGetter();
                    angular.extend(currentHeaders, authhandler.createHeader());
                    return data;
                  }
                },

You could also add the transformer to all requests:

myApp.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.transformRequest.push(function(data, headersGetter) {
                    var currentHeaders = headersGetter();
                    angular.extend(currentHeaders, authhandler.createHeader());
                    return data;
                  });

That way you don't have to configure anything or your resources.

edited Nov 21, 2014 at 11:33

answered Nov 21, 2014 at 10:47

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

4 Comments

Oliver13 Over a year ago

Thank you for your answer ! This solution works :-) But is there a possibility to add this transformRequest method dynamically to all $resource actions ? If not is there a way to avoid copying this method to all my $resource actions ?

Oliver13 Over a year ago

Thank you ! This looks very promising ! At the moment I'm refactoring my code because "authhandler" is currently not a Provider. Only providers can be injected into a config block.

Oliver13 Over a year ago

Do you think putting "$http.defaults.transformRequest.push..." into the "myApp.run" block instead of "myApp.config" block has the same effect ? In run block I can access other services to support creating the header.

Otacilio Oliveira Over a year ago

I'm using angular 1.5.7 and it does not work anymore.

Collectives™ on Stack Overflow

How to send a custom header on every request with an angular resource?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related