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! :)

Lessee

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 github.com/angular/angular.js/blob/master/CHANGELOG.md ($resource: support custom headers per action (fbdab513, #736)) – Lessee

In case you are not aware, you can use the lower-level $http service instead of $resource. $http supports custom headers. – Maple

Answer 1

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.

Scratch

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 under "Setting HTTP Headers" – Chlamys

As a matter of fact I did use $httpProvider.defaults.headers.post. I thought it obvious so I didn't mentioned it. – Scratch

@jigar-patel please see my answer. – Lox

Answer 2

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.

Lox