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!

Solicitor

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

Prakrit

Thanks. Nick's answer was almost right, but the key has to be 'save' not 'post'. – Solicitor

how to call it? i dont get it – Clementineclementis

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).

Jerrybuilt

Okay, this is getting close, but I can't use a custom action. If I had my own server, it would work. It has to be the a semantic equivalent to the jQuery.ajax call above. – Solicitor

Why can't you use a custom action? The eventual request is still a POST or GET (see the method parameter in the config). There's nothing different from the server's perspective. zuma's answer below has a very succinct example. – Jerrybuilt

Nick, when I use a custom action, it doesn't work. Where you have{ 'post': ..., that part causes the header not to get to the server. I checked the server, and request.Headers doesn't contain the right header. I checked Zuma's answer, and that was the main difference.. the key has to be 'save'. I also stepped through the angular-resource code, and verified that 'save' is in the list for DEFAULT_ACTIONS and not 'post'. – Solicitor

Nick, it turns out, what you said does work on our server (without me modifying the server).. Above where you have { 'post':..., you're actually defining a custom method called "post", not sure if that's what you meant. But that being the case, all I had to do was call post() at the end of the chain instead of save(). Just thought I'd let you know. – Solicitor

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 }
});

Macneil

I am already using $resource service. I would rather continue to use that than use the $http service. How do I pass these headers to the $resource service? – Solicitor

I am not certain, I've not used $resource, looking into it is on my todo list – Macneil

Can anybody help with my problem, which is similar to this? #31724531 – Edy