Cross domain calls in Apps through Javascript

When you try to make a cross domain call to any resource hosted in different domain, then you encounter an issue with browser does not allow to access the resources due to "same-orgin policy". In order to overcome this issue in our javascript we can use the below model using SP.WebProxy. The below sample can be added to the site using CEWP or can be added to your app.

	'use strict';
	var context = SP.ClientContext.get_current()
	(function () {
	var request = new SP.WebRequestInfo();
	var response;
	$(document).ready(function () {
	request.set_url("http://services.odata.org/Northwind/Northwind.svc/Categories");
	request.set_method("GET");
	request.set_headers({ "Accept": "application/json;odata=verbose" });
	response = SP.WebProxy.invoke(context, request);
	document.getElementById("categories").innerHTML = "<P>Loading categories...</P>";
	context.executeQueryAsync(successHandler, errorHandler);
	});
	function successHandler() {
	if (response.get_statusCode() == 200) {
	var categories;
	var output;
	categories = JSON.parse(response.get_body());
	output = "<UL>";
	for (var i = 0; i < categories.d.results.length; i++) {
	var categoryName;
	var description;
	categoryName = categories.d.results[i].CategoryName;
	description = categories.d.results[i].Description;
	output += "<LI>" + categoryName + ":&nbsp;" +
	description + "</LI>";
	}
	output += "</UL>";
	document.getElementById("categories").innerHTML = output;
	}
	else {
	var errordesc;
	errordesc = "<P>Status code: " +
	response.get_statusCode() + "<br/>";
	errordesc += response.get_body();
	document.getElementById("categories").innerHTML = errordesc;
	}
	}
	function errorHandler() {
	document.getElementById("categories").innerHTML =
	response.get_body();
	}
	})();

view raw Crossdomain.js hosted with ❤ by GitHub

Peace!