locked
get JSON for office app RRS feed

  • Question

  • Hi

    For my WORD app, I need to get JSON from a webservice. I tried the following concrete code on the web (app.showNotification adjusted to the web) and I had acces to the JSON file.

      function getProductDescription() {
        var request = $.ajax({
          type: 'GET',
          url: 'http://uprincecoredevapi.azurewebsites.net/api/productdescription?id=69',
          dataType: "json",
          jsonp: false,
          jsonpCallback: "callbackName",
          xhrFields: {
            withCredentials: false
          },
          //crossDomain: true,
          succes: function (result) {
            app.showNotification('succes')
          }
        });
        request.done(function (results) {
          app.showNotification('done')
        });
        request.fail(function (results, textStatus) {
          app.showNotification('fail')
        });
      }

    I deployed my WORDapp also to azurewebsites.net, like the webservice. But now I get always fail. I can't acces the webservice to change it to JSONP. The getJSON function works neither.

    Can someone help me out?

    Thanks Emiel


    thanks, Emiel

    Saturday, August 15, 2015 1:47 PM

Answers

  • Hi Emiel,

    This issue is caused by the same-origin policy limitations in Office add-ins. There are several ways we can address this issue, you can get more detail about it from link below:
    Addressing same-origin policy limitations in Office Add-ins

    In addition, we also can create an proxy in our web application, then we can request the web service via the proxy.

    Here is an example for your reference.
    Proxy web service(WebService1.asmx):

    /// <summary>
        /// Summary description for WebService1
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
        // [System.Web.Script.Services.ScriptService]
        public class WebService1 : System.Web.Services.WebService
        {
    
            [WebMethod]
            public string MyProxy(string url)
            {
                HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(url);
    
                HttpWebResponse response = (HttpWebResponse)myRequest.GetResponse();
                using (StreamReader reader = new StreamReader(response.GetResponseStream()))
                {
                    return reader.ReadToEnd();
                }
    
            }
        }

    JavaScript:

      function getJSONDataByProxy() {
            var request=$.ajax({
                type: "POST",
                url: "https://localhost:44303/webservice1.asmx/MyProxy",
                data: "url=http://uprincecoredevapi.azurewebsites.net/api/productdescription?id=69",
                success: function (result) {
                    showMessage(result.firstChild.firstChild.data)
                }
    
            })
    
            request.done(function (result) {
                //showMessage(result);
            })
        }
     

    Hope it is helpful.

    Regards & Fei


    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.


    Tuesday, August 18, 2015 5:44 AM
  • Hi Emiel,

    >>Is it possible to do the request with ajax like I tried?<<

    No. As far as I test, it is impossible.


    It is possible. You have to enable CORS on your Web API. 

    http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

    I've done a similar thing, call a Web API controller from a different site using AJAX.


    Please remember to mark your question as answered & Vote helpful
    Check my blog or follow me on Twitter

    Thursday, August 20, 2015 7:15 AM

All replies

  • How do you mean "I get fail"? What happens if you open the URL in a browser?

    How does your server generate the JSON, are you using Web API? You don't need jsonp in that case.


    Please remember to mark your question as answered & Vote helpful
    Check my blog or follow me on Twitter

    Sunday, August 16, 2015 11:13 PM
  • Hi Emiel,

    As far as I know, the JSONP also needs to the server side supports. Here are some helpful links about it:

    JSONP

    JSONP support and way of handling it

    I suggest that you test the JSONP request in a normal web page to separate the issue caused by Office add-ins. If the request works well in a normal web page and only occur in Office add-ins, please feel free to let me know.

    If you have issue about JSONP, I suggest that you get effective response from the forum based on the technology the service you are using.

    Hope it is helpful.

    Regards & Fei 


    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, August 17, 2015 5:47 AM
  • Hi Roland

    Thanks for answering. To explain the problem a bit more in detail. I have prepared a small presentation.

    https://mix.office.com/watch/13v73hytugglc

    Kind regards

    Emiel


    thanks, Emiel

    Monday, August 17, 2015 8:52 AM
  • Hi Fei

    Thanks for answering, but I can't use JSONP. I think the problem is situated in the office add-ins, as with a normal webpage I have no problems.  To explain the problem a bit more in detail. I have prepared a small presentation.

    https://mix.office.com/watch/13v73hytugglc

    Kind regards

    Emiel


    thanks, Emiel

    Monday, August 17, 2015 8:55 AM
  • Nice presentation.

    JSONP is only relevant to overcome authentication issues cross domain. Irrelevant as your API is anonymously available, and I would suggest to alternatively use CORS anyway.

    So, remove the JSONP parameters in your AJAX request. Or, to make it even easier, switch to $.getJSON. 

    I guess the issue is that your Add-in is using HTTPS, and you request your API via HTTP.  Change it to HTTPS and it will probably work. Also see this Fiddle: https://jsfiddle.net/1kj1a7s9/

    If that does not help, debug and see what's returned in the error in the FAIL method. And, use Fiddler to debug the response/request.


    Please remember to mark your question as answered & Vote helpful
    Check my blog or follow me on Twitter

    Tuesday, August 18, 2015 4:40 AM
  • Hi Emiel,

    This issue is caused by the same-origin policy limitations in Office add-ins. There are several ways we can address this issue, you can get more detail about it from link below:
    Addressing same-origin policy limitations in Office Add-ins

    In addition, we also can create an proxy in our web application, then we can request the web service via the proxy.

    Here is an example for your reference.
    Proxy web service(WebService1.asmx):

    /// <summary>
        /// Summary description for WebService1
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
        // [System.Web.Script.Services.ScriptService]
        public class WebService1 : System.Web.Services.WebService
        {
    
            [WebMethod]
            public string MyProxy(string url)
            {
                HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(url);
    
                HttpWebResponse response = (HttpWebResponse)myRequest.GetResponse();
                using (StreamReader reader = new StreamReader(response.GetResponseStream()))
                {
                    return reader.ReadToEnd();
                }
    
            }
        }

    JavaScript:

      function getJSONDataByProxy() {
            var request=$.ajax({
                type: "POST",
                url: "https://localhost:44303/webservice1.asmx/MyProxy",
                data: "url=http://uprincecoredevapi.azurewebsites.net/api/productdescription?id=69",
                success: function (result) {
                    showMessage(result.firstChild.firstChild.data)
                }
    
            })
    
            request.done(function (result) {
                //showMessage(result);
            })
        }
     

    Hope it is helpful.

    Regards & Fei


    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.


    Tuesday, August 18, 2015 5:44 AM
  • Hi Fei,

    Is it possible to do the request with ajax like I tried? My wordapp is deployed to http://uprinceworddev.azurewebsites.net.
    However it is both running on azurewebsites, it is a cross-domain request because of the third domain? Am I right in that?

    If I make the Proxy Web Server, do I have to change something to the code you gave me? And where do I have to save that file in my project?
    I tried to find good documentation for office apps, but I didn't find much with examples.

    Thanks


    thanks, Emiel

    Tuesday, August 18, 2015 7:54 PM
  • Hi Emiel,

    >>Is it possible to do the request with ajax like I tried?<<

    No. As far as I test, it is impossible by fix this issue by set the option jquery.support.cors.

    >>However it is both running on azurewebsites, it is a cross-domain request because of the third domain? Am I right in that?<<

    Yes, the issue is caused by cross-domain request.

    >>If I make the Proxy Web Server, do I have to change something to the code you gave me? And where do I have to save that file in my project?<<

    Yes, you need to change the Proxy URL('https://localhost:44303/webservice1.asmx/MyProxy') based on where you deploy. The code above works however it is just a demo to help you understand it, you need to change it based on the requirment.

    If you are building the Office add-ins, there are a web application in the solution, you can create an web service for the proxy and copy the code into it.

    >>I tried to find good documentation for office apps, but I didn't find much with examples.<<

    This is because the issue is common for delveoping web application instead of Office add-ins developing. You can research by the words like 'same-origin policy', 'Cross-Domain', 'JSONP' and 'CORS' etc.

    In additon, the link metioned abolve is also helpful for this topic.

    Regards & Fei


    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, August 19, 2015 2:39 AM
  • Hi Emiel,

    >>Is it possible to do the request with ajax like I tried?<<

    No. As far as I test, it is impossible.


    It is possible. You have to enable CORS on your Web API. 

    http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

    I've done a similar thing, call a Web API controller from a different site using AJAX.


    Please remember to mark your question as answered & Vote helpful
    Check my blog or follow me on Twitter

    Thursday, August 20, 2015 7:15 AM