CORS In Javascript

[rasmus.elmholt]

Hi,

I have made a html page with javascript to test some API calls to the DNA Center, but I cannot figure out how to get around the CORS policy inm my browser.

I am running the page in Chrome and using jQuery for most of the stuff.

I have two functions, one to get the token, and one to request all sites in the DNAC. The authentication I got to work with CORS Plugin in chrome, but for some reason the secondt call for all the sites still gives me an error.

I have changed the order of the code to make it readable.

$.support.cors = true;

$(document).ready(function () {
  console.log("ready!");
  startAuthentication()
});

startAuthentication():

function startAuthentication() {
  // Zero out the Authentication div container when we start the page with onload
  $("#authentication").html("");
  $('<form action="/action_page.php" onsubmit="return false">' +
    '<div class="row">' +
    '<label for="server">Server URL</label>' +
    '<input type="text" id="server" value="https://sandboxdnac2.cisco.com" name="server" placeholder="https://dnac-ip.com">' +
    '<label for="username">Username</label>' +
    '<input type="text" id="username" value="dnacdev" name="username" placeholder="username">' +
    '<label for="password">Password</label>' +
    '<input type="text" id="password" value="D3v93T@wK!" name="password" placeholder="Password">' +
    '<input type="submit" id="login" value="Submit">' +
    '</div>' +
    '</form>').appendTo("#authentication");
  // When we click the login putton call an ajax to get a token.
  $("#login").click(function () {
    //alert( "Handler for .click() called." );
    serverUrl = $("#server").val()

    var myHeaders = {
      "Content-Type": "application/json",
      "Authorization": "Basic " + utf8_to_b64($("#username").val() + ":" + $("#password").val()),
      "Accept": "application/json"
    }

    $.ajax({
      url: serverUrl + "/dna/system/api/v1/auth/token",
      type: 'post',
      async: true,
      crossDomain: true,
      headers: myHeaders,
      dataType: 'json',
      success: function (data) {
        $("#authentication").html("");
        $("#authentication").append('<form action="/action_page.php" onsubmit="return false">');
        $("#authentication").append('<div class="row">');
        $("#authentication").append('<label for="tokenfor">Token:</label>');
        $("#authentication").append('<input type="text" style="width: 75%" id="token">');
        $("#authentication").append('<input type="submit" id="relogin" value="Re Authenticate">');
        $("#authentication").append('</div>');
        $("#authentication").append('</form>');
        $("#token").val(data.Token);
        $("#relogin").click(function () {
          startAuthentication();
        });
        showSites();
      }
    });
  });
}

The above code returns a token with the CORS plugin for chrome activated.

showSites():

function showSites() {
  // Get all sites from the DNAC and show them in a list.
  console.info("Fetching token from form")
  console.info($("#token").val())
  $.ajax({
    url: serverUrl + "/dna/intent/api/v1/site",
    type: 'get',
    async: true,
    crossDomain: true,
    headers: {
      "content-type": "application/json",
      "x-auth-token": $("#token").val()
    },
    dataType: 'json',
    success: function (data) {
      //$("#authentication").html("");
      $("#authentication").append('<div class="row" id="sites"></div>');
      $("#sites").append('<select style="width: 80%; allign: center" id="selSites" rows="10"></select>');
      $.each(data.response, function (i, item) {
        $("#selSites").append('<option value="' + item.id + '">' + item.siteNameHierarchy + '</option>');
      });
      // Use select2 to make the list searchable.
      $('#selSites').select2();
      $("#sites").append('<input type="submit" id="getGlobalPools" value="Get Pools">');
      $("#sites").append('<input type="submit" id="getSiteDevices" value="show Devices">');
      
      //constructTable(data.response, "#table");
      $("#getGlobalPools").click(function () {
        getGlobalPools();
      });
      $("#getSiteDevices").click(function () {
        getDevices();
      });
      //$("#authentication").append('</form>');
      console.info(data)
    }
  });
}

The above code just return an "Access to XMLHttpRequest at 'https://sandboxdnac2.cisco.com/dna/intent/api/v1/site' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status."

I would really like to access the DNAC API using javascript on a web page, because I think the GUI part is much easier to control using web paget.

Any comments and feedback on how to get this working is appreciated.