Angularjs: Passing along a token using $resource? - angularjs

Question

I am trying to pass along a token using headers with my $resource requests. Normally you can do the following
$http.defaults.headers.common
in the .config, but I am unaware of these when the application first bootstraps so I thought i would do the following... But its currently not passing my headers..
Currently the token is hard coded but once i have confirmed it working then it will come from a injected service that holds the token.
var resource = $resource('http://localhost:port/todos/:id', {
port:":3001",
id:'#id'
}, {
get: {
method: "GET",
headers: {
"Accept": "application/stuffs;version=3",
"Authorization": "Token token='xxxxxxxxx '"
}
},
update: {method: 'PUT'}
});
return resource;
If i check fiddler I don't see the accept or authorization headers in my request.
I do see the message in fiddler but none of the headers that i was expecting.
Am I missing something here?
Any ideas?
Thanks

Answer 1

First, there is nothing wrong with your client side code. It should work fine if you're not doing cross origin request (CORS - xhr request to a different host / port than what's serving your script). Here is a working non CORS plkr example with your code - you can verify that your custom headers are being sent: http://plnkr.co/edit/cEBGjvYBpXv1q1D323IL?p=preview
If you have to do a cross origin request you have to make sure that you're both using a browser that supports CORS (IE >= 10, latest Chrome or Firefox) and that your server code responds properly to the CORS preflight OPTION request. This article explains it pretty good: http://www.html5rocks.com/en/tutorials/cors/
I've created another plnkr example and got this working by setting up a server that responds the following (http://plnkr.co/edit/zJVhqJVSnApXGzGGxcN9?p=preview)
First - the preflight OPTION request
Request URL:http://localhost:8080/todos
Request Method:OPTIONS
Server response
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT
Access-Control-Allow-Headers: Authorization
Content-Length: 0
Next the "real" request
Request URL:http://localhost:8080/todos
Request Method:GET
Response (notice that access-control-allow headers are here also):
HTTP/1.1 200 OK
Content-Type: application/x-json; charset=UTF-8
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT
Access-Control-Allow-Headers: Authorization
Content-Length: 13
Response body:
{"test":"OK"}

Answer 2

I looked into this by looking through the Angular code on GitHub. What I found out is that as of Angular 1.1.2, you can specify headers exactly as you have in your question. You can't specify headers in any version prior to 1.1.2.
As rGil suggested, make sure you are using the latest version of ngResource. It's very easy to upgrade Angular to 1.1.5, but not upgrade ngResource. In fact, I've done the very same thing with ngResource.
If you want be 100% sure, look for the following code inside ngResource (assuming you have the unminified code). This code loops over each property passed into your action (method and headers in your example) and copies them into an object (httpConfig). httpConfig is then passed into $http.
forEach(action, function(value, key) {
if (key != 'params' && key != 'isArray' ) {
httpConfig[key] = copy(value);
}
});
If you're missing this loop, you have an old version of ngResource.