current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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

share|improve this question
    
I also updated angularjs to 1.1.5 just in case this was an error in the versioning but still no luck –  Martin Jun 21 '13 at 13:31
    
Are you also using the latest version of ngResource? –  rGil Jun 21 '13 at 18:45
    
Yes I am, I am using this /** * @license AngularJS v1.1.5 * (c) 2010-2012 Google, Inc. angularjs.org * License: MIT */ –  Martin Jun 26 '13 at 8:04

2 Answers 2

up vote 2 down vote
+50

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"}
share|improve this answer
    
In the link you referenced, it says it is supported by IE8+ with some additional security requirements. fyi –  Umur Kontacı Jul 2 '13 at 18:03
1  
Yes, it's possible to do cross origin request with IE8 and IE9, but they don't follow the CORS specification from W3C so there will be no official Angular support. One of the limitations with IE8/IE9 is that custom headers are not supported. –  joakimbl Jul 3 '13 at 7:41
up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.