Sharepoint 2013/2016 hosted app asks for username and password when doing REST Query

Question

I am getting non stop authentication prompts when I make REST calls but without REST code and with basic App Code it does not asks for authentication and works fine.

I have on-prem sharepoint 2016 with url as http://sp01d-bro/ and I have configured a dew domain for Apps as :- http://sp01d-broapp/.

Now I installed a basic SharePoint hosted App with only default code and no other custom code. Also I added both above mentioned domain names in my internet explorer proxy. Now when I click on the app it works fine :-

But when I put a code of making the REST call from the App http://sp01d-broapp/ to the server http://sp01d-broapp/ it prompts me of username and password and even though I key in my credentials it does not stop and loop again and again to always asks of credentials.

My rest query URL is :-

http://apps-65c304fd62e3b6.sp01d-broapp/Intranet/HyperlinksApp/_api/SP.AppContextSite(@target)/web/lists/getbytitle('Hyperlinks')/items?@target=%27http://sp01d-bro/Intranet%27

and my code is:-

   var getRequest = function () {
        var deferred = $q.defer();
        var urlSite = decodeURIComponent(manageQueryStringParameter("SPAppWebUrl")) +
                    "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('" + constants.APP_LIST + "')/items?@target='" +
                    decodeURIComponent(manageQueryStringParameter("SPHostUrl")) + "'";
        $http({
            //url: decodeURIComponent(manageQueryStringParameter("SPAppWebUrl")) +
            //        "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('" + constants.APP_LIST + "')/items?@target='" +
            //        decodeURIComponent(manageQueryStringParameter("SPHostUrl")) + "'",
            url: urlSite,
            method: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
                "content-Type": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            },
            xhrFields: {
                withCredentials: true
            },
            username: "SP01d-bro\administrator",
            password: "abcaewrj@u"
        })
            .success(function (result) {
                deferred.resolve(result);
            })
            .error(function (result, status) {
                deferred.reject(status);
            });
        return deferred.promise;
    };

I tried without using

        xhrFields: {
            withCredentials: true
        },
        username: "SP01d-bro\administrator",
        password: "abcaewrj@u"

but even then its not working.

Any Ideas..????

Answer 1

Here you should make use of Cross Domain Library SP.Requestor.js as we are trying to access data in host web from app web.

var scriptbase = hostweburl + "/_layouts/15/";


function RetreiveEmployeeData(empid) {
$.getScript(scriptbase + 'SP.Runtime.js', function () {
    $.getScript(scriptbase + 'SP.js', function () {
        $.getScript(scriptbase + 'SP.RequestExecutor.js', function () {
            var executor = new SP.RequestExecutor(appweburl);

            executor.executeAsync(
                {
                    url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('EmployeeData')/items?$filter=EMPID eq '" + empid + "'+ hostweburl + "'",
                    method: "GET",
                    headers: { "Accept": "application/json;odata=verbose" },

                    success: function (data) {
                        var JsonObject = JSON.parse(data.body);

                        var results = JsonObject.d.results;                            
                    },

                    error: function (data) {
                        console.log("Error in RetreiveData");
                    }

                });
        });
    });
});

}