Can't set an HTTP Basic Auth header in AngularJS

Question

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 ?

You can't customize headers with JSONP. See http://stackoverflow.com/questions/3073287/set-headers-with-jquery-ajax-and-jsonp — Laurent Perrin, Jun 04 '13 at 20:17

score 4 · Accepted Answer · answered Oct 29 '13 at 19:06

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.

Conner H · Answer 2 · 2017-11-08T18:21:26.697

1

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.

edited Nov 08 '17 at 18:21

answered Jan 03 '15 at 04:35

Conner H

357
4
9

Tried this in a browser's address bar but it only gave an error. This may be a feature of the JS library? Maybe the downvote was for lack of specifics as well as probably not a best practice, but it's an interesting feature to know about. – user1944491 Mar 21 '15 at 20:38
thanks for the comment. here's [an example](http://i.imgur.com/l0os1pJ.png) of how you could do it using the Stripe API, which uses Basic Auth. what may be required is the URL requested needs to return the Basic Auth header as well as a 401 Unauthorized header, but I'm not sure – Conner H Mar 25 '15 at 17:24
At least Chrome does not allow this any more: https://www.chromestatus.com/feature/5669008342777856 – OliCoder Nov 07 '17 at 13:01
Thanks @OliBlogger, I'll update my answer to include this – Conner H Nov 08 '17 at 18:17

Can't set an HTTP Basic Auth header in AngularJS

2 Answers2