cross domain issue when accessing sharepoint list from sharepoint app - sharepoint

Question

This is my code
function getListItem(url, listname, id, complete, failure) {
// Getting our list items
$.ajax({
url: url + "/_api/lists/getbytitle('"+ listname +"')/items",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
// Returning the results
complete(data);
},
error: function (data) {
failure(data);
}
});
};
The url is coming correctly, also on checkng the full url parameter in ajax call, it is returning data when i open that in new tab
But since this ajax call is made inside a sharepoint app that is in a different domain, its throwing an error - No 'Access-Control-Allow-Origin' header is present on the requested resource
What change should i make in my site to make that list available for cross domain call.
Info:
the site url is http://www.vignesh.cloudappsportal.com/
The app url is xxxx.apps.cloudappsportal.net/CloudAppsTrial/Pages/Default.aspx

Answer 1

Cross domain calls are blocked by modern web browsers due to security concerns. This is a common issue in web based development and is particularly relevant due to the nature of SharePoint hosted Apps. For example, when accessing data in the parent web (http://consoto.sharepoint.com) from an App (hosted at http://apps.sharePoint.com/SPApp) the calls will be blocked. To get round this you can use the SP.RequestExecutor.js script to relay messages to SharePoint from within the same domain.
Example
function getListItems(hostUrl,appWebUrl, listTitle,success,error)
{
var url = appWebUrl + "/_api/SP.AppContextSite(#target)/web/lists/getbytitle('" + listTitle + "')/items?#target='" + hostUrl + "'";
var executor = new SP.RequestExecutor(appWebUrl);
executor.executeAsync(
{
url: url,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var data = JSON.parse(data.body);
success(data.d.results);
},
error: error
});
}
Usage
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var appWebUrl = getParameterByName('SPAppWebUrl');
var hostUrl = getParameterByName('SPHostUrl');
var scriptbase = hostUrl + '/_layouts/15/';
$.getScript(scriptbase + "SP.RequestExecutor.js", function (data) {
getListItems(hostUrl,appWebUrl, 'Tasks',function(data){
//print list items properties
data.forEach(function(item){
console.log(item.Title);
});
},
function(error){
//error handling goes here...
});
});
About App permissions
An app for SharePoint uses permission requests to specify the permissions that it needs to function correctly. The permission requests specify both the rights that an app needs and the scope at which it needs the rights. These permissions are requested as part of the app manifest. The following picture demonstrates how to grant read access for an App
Follow App permissions in SharePoint 2013 for a more details.