none
Issues with performing an ajax call within an Office365 app for Excel RRS feed

  • Question

  • Hi,

    I hope this is the right forum to clear some issues I have with developing an Office 365 App. (Precisely a TaskPane app for Excel). 

    I am trying to perform a cross-domain ajax call to our rpc endpoint, but I always get an Access Denied error message. I read about normal ajax request not working in IE browsers, so I followed this question: http://stackoverflow.com/questions/5087549/access-denied-to-jquery-script-on-ie and tried the following:

    1. Use the XDomainRequest method. 
    var xdr = new XDomainRequest();
    xdr.open("POST", "<url>");
    xdr.onload = function () {
        var dom = new ActiveXObject("Microsoft.XMLDOM");
        dom.async = false;
        dom.loadXML(xdr.responseText);
    };
    var response = xdr.send();

    This gave me a Access Denied run-time exception at xdr.open()

    2. Use the MoonScript with jquery as documented at:

    https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest

            $.support.cors = true;
            $.ajax({
                cache: false,
                crossDomain: true,
                contentType: 'application/json; charset=utf-8',
                url: 'http://myExample.com/rpc',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(json)
            }).success(function (response) {
                app.showNotification("Success", response.statusText);
                console.log("Success", response.statusText);
            }).error(function (response) {
                app.showNotification("Error", response.statusText);
                console.log("Error", response.statusText);
            });

    This worked fine when I load the HTML and scripts from IEv10 browser directly, but gives the same Access Denied exception when accessed via the Excel App. 

    I feel its not an IE issue, but some setting that should be enabled in these Office Apps. Any pointers?

    Thanks!

    Shravan

    Monday, January 20, 2014 9:30 AM

Answers

  • Hi Shravan,

    By default, the Apps for Office are using “https” protocol. When you call http Ajax from Apps for Office using https protocol, you will encounter “Access Denied” error. For a workaround, you could change your App’s protocol to Http or call Ajax via Https.

    By the way, we don’t recommend using ActiveXObject in Apps for Office. So I suggest you to use the second way.

    Below is an example for your reference:

        function crossDomanAjaxCall() {
            $.support.cors = true;
    
            $.ajax({
                contentType: 'application/json; charset=utf-8',
                url: 'http:/www.crossdomain.com/home/data',
                type: 'Get',
                dataType: 'jsonp',
                data: "data",
                async: false,
                cache: false
            }).success(function (response) {
                app.showNotification("Success", response.statusText);
            }).error(function (response) {
                app.showNotification("Error", response.statusText);
            });
        }

    For cross-domain calling, the dataType parameter should be “JSONP”, and you also need to have “JSONP” supported on Service Side.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, January 22, 2014 8:03 AM
    Moderator
  • Hi AskShravan,

    >> How do I change my apps protocol to http? <<

    In Visual Studio, select the Web Project and set “SSL Enabled” to “False”.

    >> I cannot support JSONP at the server side, as it is not in my control <<

    Another way is using HTTP access control (CORS); in this way, you need to add “Access-Control-Allow-Origin” header on service side.

        function crossDomanAjaxCall() {
            $.support.cors = true;
    
            $.ajax({
                crossDomain: true,
                url: 'http://website/request/data',
                type: 'POST',
                dataType: 'json',
                data: "data",
                async: false,
                cache: false
            }).success(function (response) {
                app.showNotification("Success", response.statusText);
            }).error(function (response) {
                app.showNotification("Error", response.statusText);
            });
        }
    

    >> A question to add onto, how I export this (Excel) app into a package. So that others in my team can import it. Eventually when it is production ready, I plan to deploy it to the office store. <<

    About publishing Apps for Office, here are several articles for your reference:

    How to: Publish an app for Office

    How to: Publish an app for Office that is packaged as an autohosted app for SharePoint

    Questions about Publishing Apps for Office to Office Store, you could consider to post them on Publishing Apps for the Office Store forum for more efficient response.

    Hope it will help.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, January 27, 2014 2:38 AM
    Moderator

All replies

  • Hi Shravan,

    By default, the Apps for Office are using “https” protocol. When you call http Ajax from Apps for Office using https protocol, you will encounter “Access Denied” error. For a workaround, you could change your App’s protocol to Http or call Ajax via Https.

    By the way, we don’t recommend using ActiveXObject in Apps for Office. So I suggest you to use the second way.

    Below is an example for your reference:

        function crossDomanAjaxCall() {
            $.support.cors = true;
    
            $.ajax({
                contentType: 'application/json; charset=utf-8',
                url: 'http:/www.crossdomain.com/home/data',
                type: 'Get',
                dataType: 'jsonp',
                data: "data",
                async: false,
                cache: false
            }).success(function (response) {
                app.showNotification("Success", response.statusText);
            }).error(function (response) {
                app.showNotification("Error", response.statusText);
            });
        }

    For cross-domain calling, the dataType parameter should be “JSONP”, and you also need to have “JSONP” supported on Service Side.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, January 22, 2014 8:03 AM
    Moderator
  • Hi,

    I cannot support JSONP at the server side, as it is not in my control. That is why, I specifically need a POST call.

    How do I change my apps protocol to http? 

    A question to add onto, how do I export this (Excel) app into a package. So that others in my team can import it. Eventually when it is production ready, I plan to deploy it to the office store. 

    Thank you for your support. 

    Wednesday, January 22, 2014 9:53 AM
  • JSONP was used before as a workaround to the SOP restrictions. Now most browsers support the CORS standards so I don't understand why it is still recommended here. We ran into similar issues in my Office App development and we cannot use JSONP either because it doesn't allow the caller to pass HTTP authorization header which is a requirement for us to make the call.

    Sunday, January 26, 2014 4:30 PM
  • Hi AskShravan,

    >> How do I change my apps protocol to http? <<

    In Visual Studio, select the Web Project and set “SSL Enabled” to “False”.

    >> I cannot support JSONP at the server side, as it is not in my control <<

    Another way is using HTTP access control (CORS); in this way, you need to add “Access-Control-Allow-Origin” header on service side.

        function crossDomanAjaxCall() {
            $.support.cors = true;
    
            $.ajax({
                crossDomain: true,
                url: 'http://website/request/data',
                type: 'POST',
                dataType: 'json',
                data: "data",
                async: false,
                cache: false
            }).success(function (response) {
                app.showNotification("Success", response.statusText);
            }).error(function (response) {
                app.showNotification("Error", response.statusText);
            });
        }
    

    >> A question to add onto, how I export this (Excel) app into a package. So that others in my team can import it. Eventually when it is production ready, I plan to deploy it to the office store. <<

    About publishing Apps for Office, here are several articles for your reference:

    How to: Publish an app for Office

    How to: Publish an app for Office that is packaged as an autohosted app for SharePoint

    Questions about Publishing Apps for Office to Office Store, you could consider to post them on Publishing Apps for the Office Store forum for more efficient response.

    Hope it will help.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, January 27, 2014 2:38 AM
    Moderator