4 Replies Latest reply on Mar 20, 2014 1:14 AM by Tobias Appel

    How to circumvent Same-Origin-Policy when using JQuery to connect to Webservice

    Tobias Appel

      Hi,

       

      I'm currentlly trying to develop a scanner application that will connect to a REST backend hosted on a Tomcat 7 Server. I'm using KnockoutJS and JQuery. The problem is, this is completely knew to me, I don't really know much about those technologies. My idea was to copy the HTML, Javascript and CSS Files directly to the RhoMobile Installation Directory (using Windows CE 5 Devices currently). The device will be on the same privat WLAN as the backend but still I can't make JQuery Ajax calls to the backend - I will always end up with ajax status 0. I hit google and found out about the same-origin-policy. After some testing it really boils down to that being the problem.

      If I host the website on the local server it also doesn't work unless I host it within Tomcat. I have Apache on Port 80 and Tomcat on 8080. So if the webpage resides on http://localhost/test.html and tries to connect to http://localhost:8080/backend/Test it won't work unless the call also comes from localhost:8080

       

      This probably has some performance issues (performance is already a problem in Windows CE devices) and I would want to have all the files stored locally on the device. I did spend like 2 hours searching google but I found no solution. I found some complicated answers that didn't help me much. But I can't believe that nobody else has the same use-case scenario as I do - using a mobile device to connect to some remote webservice seems pretty standard to me.

       

      The ajax call to the Rest Backend I got from some tutorial and to be honest, I don't know if it's the correct way to connect to a REST service, but it does work currently. This is what I call in Javascript:

       

      self.ajax = function(uri, method, data) {
                  var request = {
                      url: uri,
                      type: method,
                      contentType: "application/json",
                      accepts: "application/json",
                      cache: false,
                      dataType: 'json',
                      data: JSON.stringify(data),
                      beforeSend: function (xhr) {
                          xhr.setRequestHeader("Authorization",
                              "Basic " + btoa(self.username + ":" + self.password));
                      },
                      error: function(jqXHR) {
                          console.log("ajax error " + jqXHR.status);
                      }
                  };
                  return $.ajax(request);
              }
      // And then
      self.login = function(tempID) {
          self.ajax(self.playerURI + "/" + tempID, 'GET').done(function(data) {
              // do stuff
          }).fail(function(jqXHR) {
              // handle failure);
      }
      

       

       

      Can anyone please point me in the right direction? I'm not even sure how to tackle that problem or what to search for on stackoverflow.