With AngularJS, I don't want to set the global $http.defaults.headers.common. Can I send my custom header with each $resource call?

Question

I'm calling a back-end server that I cannot control. Currently it's using jQuery ajax like this:

return $.ajax({
    type: "POST",
    url: "/api/cases/store",
    contentType: "application/json",
    data: JSON.stringify(parameters),
    headers: { "Authorization": cred } : {}
}) // ... etc.

I want to convert it to use the $resource service, and got it working doing this

$http.defaults.headers.common['Authorization'] = cred;
return $resource('/api/cases/store').save();

The only problem is that I'm having to set the global $http service defaults with the auth credentials.

I am seeing that you're supposed to be able to pass in custom headers with the $http call, and now with $resource calls, but I can't find any examples of how to do it in my case (with a POST).

I also can't find anything on this in the AngularJS documentation. How do you guys figure this stuff out? The docs are so bad!

Answer 1

Instead of this:

$http.defaults.headers.common['Authorization'] = cred;
return $resource('/api/cases/store').save();

Do this:

return $resource('/api/cases/store', {}, {
    save: {
        method: 'POST',
        headers: { 'Authorization': cred }
    }
}).save();

Note that you have to use 'save' as the action, the first key in the third parameter. Can't test it, so let me know if it works.

And I agree. The documentation doesn't talk about it. Take a look at the DEFAULT_ACTIONS list in the $resource source-code in angular-resource.js

Answer 2

The $resource documentation does cover it, though its certainly awkward to read. You have to make a custom action for it, and all the parameters you can pass to the config are NOT listed on the $resource page. You'll want to check out the $http docs page for the possibilities for the config object.

$resource() takes 3 arguments: the URL, the default parameters object, and the actions object. Actions map method names to $http configs, basically.

You want to make a custom action, something like:

var MyResource = $resource('/myendpoint/', {}, { 'post': { method: 'POST', headers: {"Authorization" : cred}}); // and any other $http options you might want

Those actions get turned into methods on the MyResource object, so you could name the action something more semantic than just "post" if you wanted (the examples on the docs page set up a "charge" action for a credit card resource, for instance).

Answer 3

The documentation for $http is pretty solid, as is most of the other documentation on their site.

And you can absolutely define your auth headers on each individual AJAX calls.

try something like this:

$http({
    method: 'POST',
    url: 'serverUrl',
    data: parameters,
    headers: { Authorization: cred }
});