topic Re: APIC-EM API using javascript in Controllers

APIC-EM API using javascript

Joshua Leatham — Fri, 01 Mar 2019 12:28:03 GMT

I am trying to access the always-on APIC-EM sandbox API using my webserver and javascript. I have already done the python based learning labs and didn't have much issue with it.

Scenario:

I have a locally hosted nodejs server. I am using xmlHttpRequest (the nodejs version xhr actually) and I can run a GET command no problem. However, since V1 and the new ticketing system, I need to be able to POST the username/password so that I can get the ticket and run the GET commands that I want (network device discovery etc).

Problem:

APIC-EM doesn't seem to recognize the header content type of 'application/json' when I POST (it does with GET, no problem). It returns an error of: "error code": "unknown", "message": "Content-type: 'text/plain;charset=UTF-8' not supported"

Here is my code:

var json_text = '{ "username": "admin","password": "C!sc0123" }';
var ticket_json = JSON.parse(json_text);
var apicem_ip = "sandboxapic.cisco.com:9443";
var apic_url = 'https://'+apicem_ip+'/api/v1/ticket';
//- var xmlHTTP = new XMLHttpRequest();
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();
xhr.open('POST',apic_url,false);
xhr.responseType = 'JSON';
xhr.setRequestHeader = ('content-type', 'application/json');
xhr.send(JSON.stringify(ticket_json));
app.locals.apic_nd = xhr.responseText;

Lines 6 and 12 are nodejs specific as XMLHttpRequest doesn't exist natively in nodejs. I don't think that is a problem because I can successfully use GET and receive a response from the sandbox controller. Line 12 is just setting a global variable to be called in my HTML file (which is where I view the responses and errors from the sandbox controller).

Things I've tried, I tried to send just a plain JSON object on line 11 (without the stringify function which converts it into a string), but that doesn't work in Java Script and I believe that that is not how the python API works either (it is a string as well). I also changed line 10 to 'text/json' as well, no luck.

Why am I trying to do this?

I already have a way to view the controller data via a shell using python, I would like to call the APIs and see the same data via a browser. I figured JavaScript would be the easiest way but ran into the above issue.

Any help would be appreciated.

Re: APIC-EM API using javascript

Joe Clarke — Mon, 02 May 2016 19:17:44 GMT

I think what might be happening is XMLHttpRequest is looking for a "Content-type" header with an uppercase 'C'. Since it doesn't see one, it goes with its default. Can you try setting the header Content-type and see if that helps? While this shouldn't matter, there have been bugs with this in the past with XMLHttpRequest modules.

Re: APIC-EM API using javascript

Joe Clarke — Mon, 02 May 2016 19:29:47 GMT

If that doesn't work, the other thing it might be is complaining on the Accept header. Try also adding:

xhr.setRequestHeader('Accept','application/json');

Re: APIC-EM API using javascript

Joshua Leatham — Mon, 02 May 2016 20:58:11 GMT

I tried both your options and still got the same error message.

Thanks for your input, any other ideas?

Re: APIC-EM API using javascript

Joe Clarke — Mon, 02 May 2016 21:07:47 GMT

Can you get a sniffer capture of the request to see what headers and body the client is sending?

Re: APIC-EM API using javascript

yawming — Mon, 02 May 2016 21:36:40 GMT

I tried yours and got

Then I modified my script to be the same as your then got

var url = 'https:/sandboxapic.cisco.com:9443/api/v1/ticket';

// provide username and password as body of request

var j_data = {

"username":"admin",

"password":"C!sc0123"};

var json_text = '{"username":"admin","password":"C!sc0123"}';

var ticket_json = JSON.parse(json_text);

var xmlHttp = new XMLHttpRequest();

alert("test1");

xmlHttp.open("POST", url, false);

xmlHttp.setRequestHeader("Content-type", "application/json");

alert("test2");

xmlHttp.responseType = "JSON";

alert("test3");

// xmlHttp.send(JSON.stringify(j_data));

xmlHttp.send(JSON.stringify(ticket_json));

alert("test4");

alert(xmlHttp.response);

var data = JSON.parse(xmlHttp.response)

alert(data.version)

alert(data.response.serviceTicket);

}

I suspect there may have hidden char in you script or I missed something.

BUT those are minor compare to what you can see from the last image that we are facing CORS issue. How can you resole the CORS issue that's the challenge.

Re: APIC-EM API using javascript

yawming — Mon, 02 May 2016 22:11:28 GMT

xhr.setRequestHeader = ('content-type', 'application/json'); ==> got error.

xhr.setRequestHeader('content-type', 'application/json');

Aslo we can just use

var json_text = { "username": "admin","password": "C!sc0123" };

......

xhr.send(JSON.stringify(json_text));

Re: APIC-EM API using javascript

Joe Clarke — Mon, 02 May 2016 22:15:23 GMT

Heh, I didn't catch that. Yeah, it's a method. It doesn't return a settable property.

Re: APIC-EM API using javascript

Joshua Leatham — Tue, 03 May 2016 00:25:32 GMT

Hmm, nice catch! I wonder why it worked with the GET requests. I changed the code but still a no go. Looking at the xhr module I am using, there is a known bug for synchronous requests that mess up header data. I changed the code to async which is supposed to fix it but still got the same error. I think the problem might be with the module. There is another one I can try and will post back tomorrow or tonight. Thanks so far!

Re: APIC-EM API using javascript

Joshua Leatham — Tue, 03 May 2016 20:16:30 GMT

I got it working with a different module, not sure why I was using the old one...guess I am new to nodejs and restAPIs. Here is the code (this website won't let me format code in replies...)

Thanks for y'alls help!!

var apicem_ip = "sandboxapic.cisco.com:9443";

var apic_url = 'https://'+apicem_ip+'/api/v1/ticket';

var request = require('request');

var options = {

url: 'https://'+apicem_ip+'/api/v1/ticket',

method: "POST",

headers: {

'Content-type': 'application/json'

//console.log("test1");

body: '{ "username": "admin", "password": "C!sc0123"}'

//console.log("test2");

};

function callback(error, response, body) {

console.log("callback function");

//if (!error && response.statusCode == 200) {

if (!error) {

var info = (JSON.parse(body));

console.log(info);

console.log("status 200");

}

else {

//console.log(response.statusCode);

//console.log(JSON.parse(body));

console.log(JSON.parse(body));

}

request.post(options, callback);

Re: APIC-EM API using javascript

yawming — Tue, 03 May 2016 20:24:06 GMT

Glad to hear that, so you did not get any CORS issue ?

Re: APIC-EM API using javascript

Joshua Leatham — Tue, 03 May 2016 20:30:53 GMT

Not sure what CORS is, but I was able to get a ticket number... so now it is on to the next where I use the ticket number as a header in my GET requests...like in the python modules.

Re: APIC-EM API using javascript

yawming — Tue, 03 May 2016 20:36:33 GMT

I wonder if you can share your whole javascript ? You use node.js right ?

https://www.w3.org/TR/cors/

Re: APIC-EM API using javascript

Joshua Leatham — Tue, 03 May 2016 20:44:22 GMT

Yes. Node.js with express.js as the webfrontend. I am also using jade as the HTML template option. I am all new to this, I just downloaded a template website (google hackathon-startup).

The code I posted above is the only real addition I've made to app.js. However, I don't think that is where the code should live. I am trying to figure out now how to incorporate the js code either directly into HTML via jade... or... directly into the controller js res handler. Again, new to node in general so still trying to figure it out.

Re: APIC-EM API using javascript

khorheesoo — Sat, 16 Jul 2016 16:19:44 GMT

Hi Guys

I am trying this code JS as well

=================================

<html>

<head>

<title>

Hello.com

</title>

</head>

var url = 'https://sandboxapic.cisco.com/api/v1/ticket';

// provide username and password as body of request

var json_text = {"username" : "devnetuser","password" : "Cisco123!"};

var x = JSON.stringify(json_text);

//var ticket_json = JSON.parse(json_text);

var xmlHttp = new XMLHttpRequest();

xmlHttp.withCredentials = true;

alert("test1");

xmlHttp.open("POST", url, true);

xmlHttp.setRequestHeader('X-PINGOTHER.com', 'pingpong');

xmlHttp.setRequestHeader("content-type", "application/json");

alert("test2");

xmlHttp.responseType = "json";

alert("test3");

xmlHttp.send(x);

//xmlHttp.send(json_text);

alert("test4");

var data = JSON.parse(xmlHttp.response);

//alert(data.version);

// alert(data.response.serviceTicket);

</script>

</html>

=====================================

I think I am having an issue with CORs. cant figure out the problem

Here's what i get when I run chrome CTRL+Shift +J (devtools)

Re: APIC-EM API using javascript

Joshua Leatham — Sun, 17 Jul 2016 13:13:02 GMT

My understanding is that cors prevents HTTP requests from running in browser. I worked around this by sending info to nodejs server and sending request from there. Not sure how else to do it.

Re: APIC-EM API using javascript

khorheesoo — Sun, 17 Jul 2016 15:40:41 GMT

thanks Joshua. I think I have the same problem.

So basically you using a proxy in between to send the request on behalf and then return the response back.

Sounds like we are hacking our way through it.

I am using a local machine which runs the scripts and then passing it to my locally run IIS server and getting output.

I also noticed that some timeout needs to be set to get response. If I run the alerts too fast i dont get an output.

Here's how I'm setting a little timeout for the script to get the information from the server. Are you able to get the info immediately? So far I have been able to run some codes already using PUT and GET. But I am now learning how to create a Java Application to access this information instead of using Javascript.

setTimeout(tst, 3000);

function tst () {

var data = JSON.parse(xmlHttp.responseText);

document.getElementById("demo").innerHTML = "The Ticket number is " + data.response.serviceTicket;

alert(data.version);

}

Re: APIC-EM API using javascript

Joshua Leatham — Sun, 17 Jul 2016 16:31:03 GMT

Nodejs is asynchronous so the timeouts and dealing with hangups are explicit in the architecture. I.e., it will call the request, then move on to other code, and then come back to the request as soon as there is a response.

I agree that using a back end server for requests is a bit of a work around, but then again, I don't understand cors and the security issues that come with. I doubt using a back end server is any more secure though.

Re: APIC-EM API using javascript

khorheesoo — Sun, 17 Jul 2016 20:44:09 GMT

Thanks. I get it. Just tried with a Java Application and none of the cors issues. It seems to be a JS specific issue. Even the timeout is not necessary.