SharePoint 2013. App Part - Access Denied

Question

I am working with SharePoint 2013 and I developed some app parts to show information in our intranet. These app parts get data from WEB API using jQuery, It works fine in Chrome, Firefox, but in Internet Explorer 11 does not work.

For example in IE11 when I run this sentence:

$.getJSON("webapi web root==>/ServiciosIntranetP/api/Exten2/ObtenerporParametro?Valortex=ali&Opcion=1", function (obj) {
   var tags = eval(obj);
 });

And in Chrome it works fine (in Firefox too):

I developed these app parts in a remote session in SharePoint server 2013 (Windows 2012). When I tested the application in the same server using IE11 it works fine, but the problem appears when I want to use these app parts from client machines.

Other important information, my Web API services are hosted in a different IIS server where SharePoint 2013 is hosted.

Web API service: Windows Server 2008 with II7, server name: (srvurbde01) Sharepoint 2013: Windows Server 2012 server name: (srvurbde05)

I would like to know what I can check to solve this issue, because it is very odd that IE11 works in the development environment (App Part is hosted in SharePoint Server and the Web API are hosted in other server with IIS), but not from clients machines. As you can see in the examples this simple sentence does not work in the clients machines using IE11, but it works with Chrome and Firefox.

I have reviewed issues of IE and CORS, but all I read is about problems of IE9 or lower, because they does not use the XMLHttpRequest, but it uses an alternative object named XDomainRequest. However I understand IE10 (or greater) use XMLHttpRequest.

In fact if I call the Web API I put in the example from a website developed in Visual Studio using a client machine it works fine, the getJSON sentence get data, so it seems it is not a problem with IE11, instead I guess it could be a problem with the SharePoint configuration (it is only a guess).

Answer 1

This is definitely a CORS related issue I'm afraid, as you've discovered the browser implementations vary greatly as I've also found through trial and error.

Fortunately the SharePoint Cross Domain library can help in this instance to ensure consistency across all browsers.

I wrote up a bit on this a while ago on my blog under: Section: Retrieving External Web Service Data

Here's a helper function I use to simplify the calls:

// SharePoint Cross domain library helper function
HolidaySync.prototype.crossDomainCall = function (SPHostUrl, callUrl, successCallback, failureCallback) {
    // Use the Cross Domain library 
    // Source: http://blogs.msdn.com/b/officeapps/archive/2012/11/29/solving-cross-domain-problems-in-apps-for-sharepoint.aspx
    $.getScript(SPHostUrl + "/_layouts/15/" + "SP.RequestExecutor.js", Function.createDelegate(this, function () {

        // First construct our JSOM request
        var clientContext = new SP.ClientContext.get_current();

        var crossDomainRequest = new SP.WebRequestInfo();

        crossDomainRequest.set_url(callUrl);
        crossDomainRequest.set_method("GET");

        var response = SP.WebProxy.invoke(clientContext, crossDomainRequest);

        // Execute our request with a callback function
        clientContext.executeQueryAsync(Function.createDelegate(this, function () {
            var statusCode = response.get_statusCode();

            // HTTP status success / failure determines which callback function to send our results to
            if (statusCode === 200) {
                // JavaScript functions are first-class objects (how cool!)
                successCallback(response.get_body());
            }
            else {
                failureCallback(statusCode, response.get_body());
            }
        }));
    }));
};

(Adapted from source: http://blogs.msdn.com/b/officeapps/archive/2012/11/29/solving-cross-domain-problems-in-apps-for-sharepoint.aspx)

To use the function, first you must add the external URL to the AppManifest remote endpoints, then call it like this (example calls a public web service):

var url = "http://www.holidaywebservice.com/HolidayService_v2/HolidayService2.asmx/GetCountriesAvailable";

// Use the Cross Domain Helper
this.crossDomainCall(this.urlTokens.SPHostUrl, url, Function.createDelegate(this, function (response) { 
... [etc]

Hope that helps..

Answer 2

I could resolve my problem, when I called the webapi from IE11 in a client machine I got data if I included the address of the application (AppPart) in the "Secure Zone" of IE11. When I did it worked fine like Chrome an Firefox, the problem was solved.

Thanks for your help.