jQuery call all list items using REST

Question

I'm trying to make a REST call to a SP list to retrieve all the list items, using jQuery from another website.

Bit of background: The server is on prem, and the usage of this script will be on prem and on the same network and that logged in account has access to the SP site and list. (Using Active Directory) I've tested the URL using Chrome's Rest Client App and it gets back 300, 200 OK,

but if try this AJAX code in my website I get this:

Failed to load resource: the server responded with a status of 401 (Unauthorized)

and

XMLHttpRequest cannot load https:///_api/web/lists/getbytitle('Knowledge%20Centre%20Content')/items. Response to preflight request doesn't pass access control check: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:59768' is therefore not allowed access.

Here is the code I've used:

$.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
    xhrFields: { withCredentials: true },
    crossDomain: true,
    processData: false,
    dataType: "json",
    headers: {
        "Accept": "application/json; odata=verbose"
    },
    success: function (data) {
        success(data);
    },
    error: function (data) {
        failure(data);
    }
});

I've tested some other methods too:

var ajaxCall = $.getJSON("http://<URL>/_vti_bin/listdata.svc/KnowledgeCentreContent");

ajaxCall.success(function (jsonData) { callbackSuccessFunction(jsonData.d.results); });
ajaxCall.error(function () { callbackErrorFunction({ status: 'error', data: 'error message.' }); })

Returning this

GET https:///_vti_bin/listdata.svc/KnowledgeCentreContent 401 (Unauthorized)

and

function GetAnnouncementData() {
var soapPacket = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
    <soapenv:Body> \
        <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
            <listName>Temp</listName> \
            <viewFields> \
                <ViewFields> \
                    <FieldRef Name='Title' /> \
                </ViewFields> \
            </viewFields> \
        </GetListItems> \
    </soapenv:Body> \
</soapenv:Envelope>";
jQuery.ajax({
    url: "http://<URL>/_api/web/lists/getbytitle('Knowledge%20Centre%20Content')/items",
    type: "GET",
    dataType: "xml",
    data: soapPacket,
    complete: processResult,
    contentType: "text/xml; charset=\"utf-8\""
    });
}

function processResult(xData, status) {
    alert(xData.responseText);
}
$(document).ready(function () {
    GetAnnouncementData();
});

Returning this:

XMLHttpRequest cannot load http://url/_api/web/lists/getbytitle('Knowledge%20C…istItems%3E%20%20%20%20%3C/soapenv:Body%3E%20%20%20%3C/soapenv:Envelope%3E. Response for preflight is invalid (redirect)

I know there is some credential issue here and I could just make the page open the URL in a popup and get the data from it and then close it but I don't to avoid messy hacks like that. I just can't figure out why using the the URL works fine but using the AJAX call returns 401.

Answer 1

The issue is with CORS and not so much with credentials.

A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true.

However you have configured CORS in SharePoint, you need to specify the domains explicitly from which you will allow cross-domain requests. Essentially you can either use Access-Control-Allow-Origin: * with anonymous authentication or you must specify the domain. In your test case here, you could use a HOSTS file entry to map a domain to 127.0.0.1 so that you can test your code.

Personally, I'd like to know how you are configuring SharePoint to user CORS at all as I did not think that was possible.

One thing that may be possible is using the cross domain library but I recall looking into this at one point and it could only work with SharePoint hosted apps.

Answer 2

Try

dataType : "jsonp"

instead of

dataType : "json"