2 Replies Latest reply on Oct 13, 2015 8:42 PM by Jeff D

    Cross domain issue while using "Sign In" REST API in jQuery

    Kiran Anumalla

      Hi,

       

      We are using “sign” REST API to get authentication ticket from Tablue server, but getting console error stating that “CrossDomain” issue.

      We visited the url http://databoss.starschema.net/the-big-cors-debate-tableau-server-and-external-ajax-calls/

      http://onlinehelp.tableau.com/current/api/wdc/en-us/WDC/wdc_cors.htm

      and followed the steps as mentioned in the document but still get the cross domain error.

       

      Here the html code  talking to tableau server-

       

      <!DOCTYPE html>

      <html>

      <body>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

       

       

      <script type='text/javascript'>

      $(document).ready(function(){

         var SERVERURL = 'localhost:8000';

      var USER = 'administrator';

      var PASS = 'medseek1!';

       

       

      $.post("http://" + SERVERURL + "/api/2.0/auth/signin",

          "<tsRequest><credentials name=\"" + USER + "\" password=\"" + PASS + "\" ><site contentUrl=\"\" /></credentials></tsRequest>",

          function(data, textStatus, jqXHR) {

              $('#cors-test').append("<p>Logon success: " + data + "</p>");

              var token = $(data).find('credentials').attr('token');

              var site_id = $(data).find('credentials>site').attr('id');

              $('#cors-test').append("<p>Token: " + token + ", site id: " + site_id + "</p>");

       

       

              // get projects

              $.ajax({

                  url: "http://" + SERVERURL + "/api/2.0/sites/" + site_id + "/projects",

                  headers: {

                      'X-Tableau-Auth': token

                  },

                  dataType: "xml",

                  success: function(projects) {

                      $(projects).find('project').each(function(index) {

                          $('#cors-test').append("<p>projects: " + $(this).attr('name') + "</p>");

                      })

                  }

              });

              return "";

          },

          "xml", {

              error: function(jqXHR, textStatus, errorThrown) {

                  return $('#cors-test').append("AJAX Error: " + textStatus);

              },

          }

      );

      });

       

       

      </script>

      </body>

      </html>

       

      Below is what our requirement looks like -

       

      We have a web app written in angulerjs.

      First we will fetch list of reports and folders from tableau server and bind the list in tree hierarchy in web page.

      On click of the report, we will fetch reportUrl from the tableau server using either ReportID or ReportName as parameter.

      Report will be displayed on UI using Div or Iframe.

       

      Here as per table,we will write our code in the following way:

      1.Call REST API method "SignIn" to get authetication ticket passing user credential.

      2.Call REST API method "Projects" to get list of reports and folders passing the authentication ticket as header information.

      3.Then bind the list of reports and folder to UI tree element manually,should not use JavascriptAPI or there is no method for JavascriptAPI.

      4.Now expand the folder and click on any report name,call Javascript API "Tableau.Viz(div,url,option) where div would be bind to the report Url.

      we can use div or Iframe as parameter.

       

      Any help would be appreciated.

       

      Thanks

      Kiran