Not Able To Access Jenkins API From Plain JavaScript

Question

I'm fairly new to API's and JavaScript so I'm not sure what wrong I'm doing here, please find the details below for the problem which I'm facing

Objective - Get Jenkins Details On A Webpage

As a part of my objective, I'm trying to make a web page from where I can trigger a Jenkins job and get the info of the build displayed on the webpage. As one of the part of the objective I want to trigger a Jenkins job from a button on my webpage.

Issue - I created following script to do the operation -

<script>
    function RunJenkinsJob() {
        
        var xhr = new XMLHttpRequest();
        xhr.open("POST", http://admin:114a2eae5e09d93b6ee831f248892ac581@localhost:8080/job/New_Test/build?token=Datacreation, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
    }));
        
    }
    
    </script>
    <head>
        <style>body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;}</style>
    </head>
    <body>
        <h1>Check Jenkins Job Build</h1>
        <button type="button" onclick="RunJenkinsJob();"> Run Jenkins Job! </button>
    </body>
    </html>

However when I try to click this button nothing is happening, upon accessing this URL directly from browser I'm asked to provide username and password and then after refreshing new build gets triggered automatically.

Question

How to provide authentication for Jenkins in this JavaScript method so that on clicking the Button New Job can be triggered and also if I can get some pointers on how to extract the information about the build that also would be very useful.

System Details OS - Windows Jenkins Version - 2.235.1

-- Update 1 -

Please find the updated details below -

<!DOCTYPE html>
<html>
    <script>
    
    function RunJenkinsJob() {
        
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://admin:114a2eae5e09d93b6ee831f248892ac581@localhost:8080/job/New_Test/build?token=Datacreation", true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send();
        document.write(xhr.status);
        
    }
    
    </script>
    <head>
        <style>body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;}</style>
    </head>
    <body>
        <h1>Check Jenkins Job Build</h1>
        <button type="button" onclick="RunJenkinsJob();"> Run Jenkins Job! </button>
    </body>
    </html>

You need to put your API URL in quotes so that JavaScript will interpret it as a string. I also feel like the `}));` doesn't belong and should be deleted. — Shane Bishop, Feb 14 '21 at 15:42
Hi @ShaneBishop, Thank you for your valuable comment, I have made those changes and tried again but still no response. — Deepak Yadav, Feb 14 '21 at 16:53
You should edit your question to include your fixes so far then. — Shane Bishop, Feb 14 '21 at 16:56
`admin:114a2eae5e09d93b6ee831f248892ac581@localhost:8080` I am not sure jenkins still supports this. This will lead to redirection. You need to pass the user id admin and api token as an base64 encoded string in the authentication header. Also `xhr.send()` is missing. Can you check the status by printing it in console log. `console.log(xhr.status)' after the send line? — Siddharth Kaul, Feb 14 '21 at 18:06
Hi @SiddharthKaul, I tried by adding the xhr.send() and yet the results are not as expected. Upon running the xhr.status() webpage returned 0. — Deepak Yadav, Feb 14 '21 at 18:50
A status code 0 means request was cancelled. Can you check if you are getting any error? You can check that in browsers console... It seems something is cancelling your request... — Siddharth Kaul, Feb 14 '21 at 18:58
Hi @SiddharthKaul, I checked in Browsers Console,I got only 1 error which is "The character encoding of the HTML document was not declared." Apart from that there are no errors. After clicking the button, 0 gets displayed on webpage. — Deepak Yadav, Feb 15 '21 at 06:57

score 1 · Accepted Answer · answered Feb 20 '21 at 15:18

The following code worked for me.

Put this into your run jenkins job function. This would help debug if it cycles through all the 4 state changes and status it recieves.

var xhr = new XMLHttprequest();
var authorizationbasic = window.btoa("username:token");
xhr.onreadystatechange = function() {
    if(this.readyState == 4)
    {
         console.log(this.status);
    }
};
xhr.open("POST", "http://admin:114a2eae5e09d93b6ee831f248892ac581@localhost:8080/job/New_Test/build?token=Datacreation", true);
xhr.setRequestHeader('Authorization','Basic ' + authorizationbasic)
xhr.send();

If you still get status as 0 then you can check the CORS Filter setting in your jenkins installation.

Hi, This answer was very useful, after checking my response, I had to install CORS Filter to my jenkins and I was able to trigger my requests successfully. I observed two things 1.) URL can be without username and token 2.) CORS Plugin is utterly important — Deepak Yadav, Mar 04 '21 at 05:13

Not Able To Access Jenkins API From Plain JavaScript

1 Answers1