System.UnauthorizedAccessException when accessing list with JSOM

Question

I try to get items from a list with JSOM. But I get a System.UnauthorizedAccessException with error code 2147024891. If I navigate and authenticate to the site with a browser I am able to access the list without problems. So I think I have the correct permissions.

Here is my code:

function getClientContextForSiteURL() {
    var siteUrl = "/sites/mysite";

    return new SP.ClientContext(siteUrl);
}

function getList(context) {
    return context.get_web().get_lists().getByTitle('Listname');
}

var clientContext = getClientContextForSiteURL();
var oList = getList(clientContext);

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><Query><Where><Geq><FieldRef Name=\'ID\'/>'" +
    "<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>");
sharePointCollectionListItems = oList.getItems(camlQuery);

clientContext.load(sharePointCollectionListItems);

clientContext.executeQueryAsync(
              Function.createDelegate(this, onQuerySucceeded),
              Function.createDelegate(this, onQueryFailed));

Answer 1

If you're running a SharePoint hosted app you can't just create a context for a different site and request data that way, it will run into same-origin issues.

Luckily, the SharePoint App model has a couple of tools to solve this in the form of the cross-domain library (for using the REST API) or using an AppContextSite object (for the JSOM).

Here is an example from an answer I gave to another related question: Create context for another site collection using NAPA

$(document).ready(function () {  
    var qsVals = SP.ScriptHelpers.getDocumentQueryPairs();  
    var hostWebUrl = decodeURIComponent(qsVals.SPHostUrl);
    // note1
    var clientContext = SP.ClientContext.get_current();
    // note2
    var appContextSite = new SP.AppContextSite(clientContext, hostWebUrl);

    var hostWeb = appContextSite.get_web();
    // note3
    clientContext.load(hostWeb);

    clientContext.executeQueryAsync(function() {
        // do stuff with the objects you loaded in the host web
        alert("Host web title: \n" + hostWeb.get_title());
    }, function(sender, args) {
        // something went wrong
        console.log(args.get_message());
    });
});

Note 1: You can just use SP.ClientContext.get_current() here since you are working from the script that is on a page in the AppWeb.

Note 2: The SP.ProxyWebRequestExecutorFactory seems unnecessary in my experience - despite the fact that many of the examples use this pattern. Additional note here, SP.ClientContext.get_current() returns an instance of an already existing client context, so you do not use the new keyword. We're creating an SP.AppContextSite from nothing, so we do use the new keyword.

Note 3: You load the client objects with the App Web Context (the one we obtained with get_current() even though you navigate to the object from the appContextSite (the one we got from new SP.AppContextSite().

Copying and pasting the entire code snippet into your browser dev tools (firebug, chrome js console, etc.) should give you an alert with the title of your host web.

---

EDIT: Almost forgot, don't forget to give your App permission to access the Host web in the app manifest/app settings!