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 stackoverflow.com/questions/3073287/… — Laurent Perrin
– Laurent Perrin, Commented Jun 4, 2013 at 20:17

JJ Geewax · Accepted Answer · 2013-10-29 19:06:20Z

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 · Accepted Answer · 2017-11-08 18:21:26Z

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 8, 2017 at 18:21

answered Jan 3, 2015 at 4:35

Conner H

3574 silver badges9 bronze badges

4 Comments

Hoshi Over a year ago

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.

Conner H Over a year ago

thanks for the comment. here's an example 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

OliCoder Over a year ago

At least Chrome does not allow this any more: chromestatus.com/feature/5669008342777856

Conner H Over a year ago

Thanks @OliBlogger, I'll update my answer to include this

Collectives™ on Stack Overflow

Can't set an HTTP Basic Auth header in AngularJS

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related