Basic authentication with CORS

[Stanley Nguyen]

I'm trying to make a cross-domain basic authentication but it fails to work.  Using AngularJS 1.0.8. 

            $http({
                method: 'GET',
                url: 'http://localhost:9998',
                headers: {Authorization: 'Basic ' + Base64.encode($scope.username + ':' + $scope.password)},
                withCredentials: true
            });


No matter what I try, browser always attempts to do a preflight OPTION check and fails since "Authorization" is not in the allowed header list.  Have anyone succesfully
made a basic authentication request with CORS setup?

OPTIONS / HTTP/1.1
Host: localhost:9998
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:8085
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
DNT: 1
Referer: http://localhost:8085/app/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Thanks,

Stanley

[Jeff Hubbard]

Your server needs to reply to the OPTIONS request correctly first. The response needs to include the Access-Control-Allow-Headers: authorization header. This is how CORS works, and there is no way around it.

[Manuchandraprasad R]

Hi Stanley,

All browsers do an OPTIONS requests while is CORS doing any kind of requests to a REST server. I had recently faced a similar issue with Python Flask and Angular JS and once i fixed it, i blogged about it here.  I don't know your REST server is, but what i think you should do to get this working for would be to allow OPTIONS request method in your REST endpoint, and add 'authorization' to the 'Access-Control-Allow-Headers' and also add "localhost:9998" to 'Access-Control-Allow-Origin' . And i think everything else is correct with your setup.

[Jeff Hubbard]

This is not quite true. The OPTIONS request happens when you've specified a method other than GET or a header outside of a basic set of standard headers. See: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS specifically the preflight section.

[Manuchandraprasad R]

Thanks Jeff.. I didn't knew a lot about the OPTIONS requests. And thanks for the excellent link :) 

[Stanley Nguyen]

I think even with GET but if you have custom header, browser will do a pre-flight check as well.  In this case, the custom header is "Authorization".  My problem is the backend system is wrapped up in a black box and hosted in Tomcat. There's a place in the server code that allows me specify header (Access-Control-Allow-Headers = "*") but somehow I think it was not taken.  At this point, I'm not sure whether it's a bug on the server's side (which I am not having too many freedom to alter) or is it on the client side. 

[Manuchandraprasad R]

I think your client side is already clean. This would have to be handled in the Tomcat side.. 

Can you try setting the Access-Control-Allow-Headers="authorization"

Here is a request/response status from Chrome of a Basic HTTP Auth that works for me..