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

function TestCtrl($scope, $http, Base64){
    $http.defaults.headersmon.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 ?

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

function TestCtrl($scope, $http, Base64){
    $http.defaults.headers.mon.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 ?

• javascript
• angularjs
• basic-authentication

• 1 You can't customize headers with JSONP. See stackoverflow./questions/3073287/… – Laurent Perrin Commented Jun 4, 2013 at 20:17
• Thanks.. Guess i should use get or post then. – Manu Commented Jun 4, 2013 at 21:14

2 Answers 2

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/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.

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 ment for a link to the actual Chrome status update.