AngularJS $resource custom headers

Question

after a couple of understanding-problems, I have run into really hard probs. I can't get my custom headers to work on the $request from AngularJS. My definition looks like this:

$scope.re = $resource('/', {
    callback: 'JSON_CALLBACK'
    }, {
    'updateCart': {
        method: 'POST',
        headers: {
            'module': 'Shop',
            'mod_id': '1',
            'event': 'updateCart'
        }
    }
});

Also here JSFIDDLE

Is this Issue still active? Is there another way to set custom headers? Thanks for any help! :)

Looks like the have almost fixed the custom header issue with $resource in Angular 1.1.1 pathological-kerning (2012-11-26) that version is considered unstable though... probably got to wait till next stable release to have this in the stable branch https://github.com/angular/angular.js/blob/master/CHANGELOG.md ($resource: support custom headers per action (fbdab513, #736)) — Preexo, Dec 17 '12 at 12:14
In case you are not aware, you can use the lower-level $http service instead of $resource. $http supports custom headers. — Mark Rajcok, Dec 17 '12 at 16:21

score 3 · Accepted Answer · answered Jan 07 '13 at 00:10

3

I believe you have to fallback to $http for custom header. I was also looking to accomplish similar task but there is no way to do it using $resource.

answered Jan 07 '13 at 00:10

Jigar Patel

4,585
1
17
20

4

Headers which you configure with the global `$httpProvider.defaults.headers.post` object will not only apply to all `$http` calls, but also to all `$resource` calls. If you can live with it being configured globally for your entire application, this might be a workaround. See [here](http://docs.angularjs.org/api/ng.$http) under "Setting HTTP Headers" – vsp Jan 29 '13 at 18:25
As a matter of fact I did use `$httpProvider.defaults.headers.post`. I thought it obvious so I didn't mentioned it. – Jigar Patel Jan 30 '13 at 07:23
@jigar-patel please see my answer. – felix at housecat Aug 12 '16 at 12:12

score 0 · Answer 2 · answered Aug 12 '16 at 11:56

This post is a bit old but I answer for other people like me who were looking for an answer:

return $resource('api/people/:id', {id: '@id'}, {
        min: {
            data: '',
            method: 'GET',
            headers: {'Content-Type': 'application/min+json'},
            isArray: true
        },
        update: {
            method: 'PUT'
        }
    });

Please do not forget the data because otherwise does not set the header.

For people like me loving typing, a builder in typescript can be done as follows:

export class ResourceBuilder {

        static $inject = ['$resource'];

        constructor(private $resource: ng.resource.IResourceService) {
        }

        private updateAction: ng.resource.IActionDescriptor = {
            method: 'PUT',
            isArray: false
        };

        private minAction: any = {
            data: '',
            method: 'GET',
            headers: {'Content-Type': 'application/min+json'},
            isArray: true
        };

        public getResource(url: string, params?: Object): CrudResourceClass<any> {
            let resource = this.$resource(url, params, {
                update: this.updateAction,
                min: this.minAction
            });
            return <CrudResourceClass<any>> resource;
        }
    }

The minAction is of type any because the ng.resource.IActionDescriptor misses that property, I do not know if they have forgot, I will open an issue for that.

I hope it helps.

AngularJS $resource custom headers

2 Answers2