Set token in Header on API response

Question

I am creating a login page in Angular. After login API call (POST), I get a token in response. In controller, I am trying to set this token in "common" header so that I can use it for authorization for all further API calls:

LoginSrv.authenticate($scope.credentials).then(
        function(data){
            $http.defaults.headers.common.Authorization = data.token;
            $state.go('nextpage');
        }
);

The next page there is again a POST API call. After this call when I check the request header in debugger I see that token in header. This response again navigate to third page (this time I am not setting header again). On third page when I call an API (GET or POST) the "Authorization" is not available in headers this time. I am not sure how this is removing by itself.

can you share the controller code for when you make the second API call and the third? — ExoticChimp, Jun 30 '16 at 07:56
Researched more on this. It seems to be a server side issue. — Gaurav, Jun 30 '16 at 09:13
The third API call is being stopped on pre-flight OPTION that's why its not showing the Header. It throws 401 authorization error on OPTION. — Gaurav, Jun 30 '16 at 09:53
which debugger are you using? a server side debugger? you should use the network tool in chrome (or something similar) to verify the request headers made by the JS frontend. if it's a server side issue with OPTION requests and you're stuck, update the question to receive more help — ExoticChimp, Jun 30 '16 at 09:59
I am using Chrom's default debugger. Can you suggest some server side debugger tool? I am posting a new question for OPTION, because now the problem is different of what I have asked here. — Gaurav, Jun 30 '16 at 10:16
Depends no your server side language? Also be sure to verify in chrome networking tab that your Authorisation header is being sent before opening a new question, and check SO for answers first — ExoticChimp, Jun 30 '16 at 10:18
Using PHP with nginX on server side. Authorization header is being sent on all GET and POST requests but not on OPTION. — Gaurav, Jun 30 '16 at 10:21
Then your problem is not server side of chrome is telling you it's not being sent. FYI xdebug is good php debugger — ExoticChimp, Jun 30 '16 at 10:29
where is OPTION coming into this? in your question you stated that you're making a POST request? is the POST or GET cross domain? if so, http://stackoverflow.com/questions/12111936/angularjs-performs-an-options-http-request-for-a-cross-origin-resource — ExoticChimp, Jun 30 '16 at 10:33

score 1 · Accepted Answer · edited May 23 '17 at 10:28

Given that your third request is cross domain, it appears your server is not correctly responding to the preflight browser OPTIONS request which is made to check what methods etc are available before it sends your request. It's not an Angular issue. One solution would be to configure your server to respond correctly to this OPTIONS request. This SO link (provided in the comments previously) explains in a bit more detail and discussions of potential solutions AngularJS performs an OPTIONS HTTP request for a cross-origin resource

Set token in Header on API response

1 Answers1