Adding header to angular $resource requests

Question

I'm trying to add a header to all http requests sent by angular ($resource used to access a REST server), to add Basic Auth information (from the user input username/password).

I thought it was as simple as $http.defaults.headers.common['Authorization'] = value; (where value is the correctly formatted auth info) when the user hits the login button, but when the requests are sent a 403 Unauthorized is returned, and inspecting the requests in Chrome's network tab the header is not set on a simple resource query.

I have been searching for a while now, there are several questions referring to this that suggest CORS is the problem (it is not, I have the correct headers set on the server side and have also tried running with web safety off in chrome just to double check that this wasn't interfering). Other answers suggest using an interceptor, but that seems to me to be very over-engineered for such a simple task (although if it is the only way I guess I'll have to use it).

EDIT: Additional information: I am convinced CORS is not the issue, as requests to the same server that do not require authentication succeed and return the expected responses. This is a problem with the Authorization header not being set correctly (or at all).

Do you encode your username and password using a base64 encoder ? — Bilal BBB
– Bilal BBB, Commented Jul 24, 2015 at 11:24
I had a similar problem, I wasn't using a base64 encoder, but now it's working. I think, the CORS is your problem. — Bilal BBB
– Bilal BBB, Commented Jul 24, 2015 at 11:28
Okay, I have no idea what's happening in that link (Not using Spring, and knowing very little about it). For reference, I turned off my CORS handling, and received the expected "No 'Access-Control-Allow-Origin' header is present on the requested resource" error. I turned it back on and that error went away, but I am still receiving a 403 error, and the outgoing request does not have the header on it that it should. — James
– James, Commented Jul 24, 2015 at 12:00

Ivan Stoyanov · Accepted Answer · 2015-07-24 12:49:35Z

3

The best practice is to create an Http Request Interceptor and add the Authorization header there.

angular.module("MyApp").factory("authHttpRequestInterceptor", ["authenticationDataService",
   function (authenticationDataService) {

       return {

           request: function (config) {
               // This is the authentication service that I use.
               // I store the bearer token in the local storage and retrieve it when needed.
               // You can use your own implementation for this
               var authData = authenticationDataService.getAuthData();

               if (authData && authData.accessToken) {
                   config.headers["Authorization"] = 'Bearer'+ authData.accessToken;
               }

               return config;
   }
};
}]);

After that you register the interceptor in your main module:

angular.module("MyApp").config([
   "$httpProvider", function ($httpProvider) {
       $httpProvider.interceptors.push('authHttpRequestInterceptor');
   }]);

answered Jul 24, 2015 at 12:49

Ivan Stoyanov

5,48212 gold badges58 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

Thought I might need to do this in the end. But that example is much simpler than the others I have seen, thanks :)

Hazarapet Tunanyan · Accepted Answer · 2015-07-24 22:29:35Z

1

You can use $httpProvider.interceptors.If you use $resource, try to use it's property transformRequest.maybe it can help you.

answered Jul 24, 2015 at 22:29

Hazarapet Tunanyan

2,85528 silver badges30 bronze badges

Collectives™ on Stack Overflow

Adding header to angular $resource requests

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related