How to avoid pop up login when calling WCF service from jquery ajax

Question

Friends, I know you have been facing these kind of question a lot.I was unable to find an answer even after a lot of google search.Well, lets come to the issue.

Requirement: Call a WCF Service GET API with basic authentication enabled using jquery ajax request.

Client side code:

<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="Scripts/Base64.js" type="text/javascript"></script>
<%--<script src="Scripts/jquery.base64.js" type="text/javascript"></script>--%>
<script type="text/javascript">
    function make_base_auth(user, pass) {
        var tok = user + ':' + pass;
        var hash = Base64.encode(tok);
        return "Basic " + hash;
    }


    $(document).ready(function () {
        var username = 'user';
         var password = 'ppp';

        var auth = make_base_auth(username, password);
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            contentType: "application/javascript",
            xhrFields: {
                withCredentials: true
            },
            cache: false,
            crossDomain: true,
            beforeSend: function (xhr) {                   
                xhr.setRequestHeader("Authentication", auth)
            },                
            data: { 'inputData': "{PatientID:'12',FromDateTime:'05/21/2013 1:28:15 PM',ToDateTime:'05/21/2013 1:28:15 PM',ResponseType:'json',CompressResponse:'false'}" },


url:"http://192.168.15.160/RestAPI/Service.svc/GetMedicationValues",             


            success: function (jsonData) {
                console.log(jsonData);
            },
            error: function (request, textStatus, errorThrown) {
                console.log(request.responseText);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    });
</script>

Problem : I am getting login pop up when running the client application.I get the output only when i provide correct credentials on the pop up, irrespective of what credentials i pass in the request header.I have come through people asking this question a lot.Have anyone been able to solve this issue ? Thank You.

Answer 1

JSONP doesn't work with basic authentication. If you don't need cross-domain request, use json as datatype.

Alos note that since JQuery 1.7, there are now two options for authentication : userName and password .

If the server performs HTTP authentication before providing a response, the user name and password pair can be sent via the username and password options.