CODEWITHSUNDEEP
javascriptangularjsbasic-authentication
Manu
Manu

Reputation: 728

Can't set an HTTP Basic Auth header in AngularJS

I wrote the following controller for testing out HTTP Basic Auth using Angular JS.

function TestCtrl($scope, $http, Base64){
    $http.defaults.headers.common.Authorization = 'Basic ' + Base64.encode('admin:secret');
    $http.jsonp( 'http://localhost:5000/test'+'/?callback=JSON_CALLBACK', {query:{isArray:true }}).
    then(function (response) {
         $scope.test = response.data;
     });
}

I can see the header being set when i console.log($http.defaults.headers) . But when i check the request headers using Chrome Developer Toolbar or Firebug in Firefox, i don't see the Authorization header.

The server receiving the request doesn't get the Authorization header.

What i am doing wrong here ?

Upvotes: 5

Views: 5885

Answers (2)

Conner H
Conner H

Reputation: 357

JJ answered it perfectly.

For more information for those browsing, if you just need to pass the Basic Authorization header, you can simply place a username and password at the beginning of the URL. This will send the header.

For example, using localhost as the URL and admin:secret as the username:password, change:

http://localhost:5000

to:

http://admin:secret@localhost:5000

Note: @OliBlogger has pointed out that the latest version of Chrome no longer supports this feature. Check his comment for a link to the actual Chrome status update.

Upvotes: 1

JJ Geewax
JJ Geewax

Reputation: 10579

I believe the answer is "Yes, for regular AJAX requests you should be able to set the proper auth headers".

However, you're not making a standard XHR call when you use JSONP (based on the example), which changes the answer to "No".

If you're stuck using JSONP, I don't think you can send any auth headers. JSONP simply doesn't work the same as Angular's $http.get for example.

See http://schock.net/articles/2013/02/05/how-jsonp-really-works-examples/ for the details, but the short version is JSONP puts down a <script> tag that fetches some data. The data returned calls the function you provide (JSON_CALLBACK in your example) around the data that the server provides. Because of that, you can't change the headers -- the request is an HTTP GET request exactly as if you'd pasted the URL for the script tag into your browser's location bar.

Upvotes: 4

Related Questions