How To Trigger Azure Automation Web Hook From A Web Browser AJAX Call?

Question

I have an Azure web hook on an Azure Automation script which accepts requests to do stuff from the web.

The following little Powershell program tests the web hook and it works fine:

$uri = "https://s10events.azure-automation.net/webhooks?token=my_super_secret_token"
$headers = @{"From"="jay@exampel.com";"Date"="05/28/2017 14:49:00"}
$params = @{"customerName"="Giovanni Pasqualovich"; "customerEmail"="giovanni.pasqualovich@company.com"; "dataLocation"="UK South"}
$body = ConvertTo-Json -InputObject $params
$webresp = Invoke-WebRequest -Method Post -Uri $uri -Headers $headers -Body $body -Verbose

I want to call the web hook from a web page. To do that, I have the following code in a HTML page:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    function postWebHook() {
       var chdata = {};
       chdata['customerEmail'] =  "giovanni.pasqualovich@company.com"; 
       chdata['customerName']= "Giovanni Pasqualovich"; 
       chdata['dataLocation'] = "UK South";

       jdata = JSON.stringify(chdata);     

       alert("JSON data: "+ jdata);
        $.ajax({
                url : "https://s10events.azure-automation.net/webhooks?token=my_super_secret_token",
                type: "POST",
                data: jdata,
                contentType: "application/json; charset=utf-8",
                dataType   : "json",
                success    : function(){
                    console.log("Commit Hook to create customer database called");
                    alert("Success");
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) { 
                    alert("Status: " + textStatus);
                }      
            });     
    }
</script>
</head>
<body>

<div id="div1"><h2>DO SOMETHING</h2></div>

<form action="">
     <input type="submit" accesskey="s" value="Submit Order" onclick="postWebHook()">
</form> 

</body>
</html>

I loaded this page into a web browser from my local file system, and clicked on the form button. Nothing happened. The Azure Automation script was not called. In Google Chrome, going to More Tools -> Developer Tools showed me the network view in the browser. Running that script caused a red message of type xhr to appear, but the status was (canceled). Once I clicked the last "alert" dialog from my web page, the error disappeared from the network view.

What do I need to do to test my web hook from a browser with Javascript/Ajax code? The code is going to run on one web site, but the POST request for the web hook goes to s10events.azure-automation.net. I appreciate any help that I can get.

------------- UPDATE Jan 5, 2018 ----------------

I checked the network traffic more closely, and the call is sending an OPTIONS HTTP message instead of a POST. Apparently that is used by browsers to pre-flight a request. How do I disable this?

I also installed the FireFox REST Client, and I was able to run the message fine.

score 0 · Answer 1 · edited Nov 08 '18 at 08:23

I have used below script and found it works with Internet Explorer but raise an error with Chrome:

function TriggerRunbook() {

    var sdata = "[" +
        '{"Value":"V1","Name":"Prm1"}, ' +
        '{"Value":"V2","Name":"Prm2"}]'

    $.ajax( {
        url: "https://s2events.azure-automation.net/webhooks?token=...",
        crossDomain: true,
        type: "POST",

        data: sdata,
        contentType: "application/json; charset=utf-8",

        error: function(xhr,status,error){
                    alert("#ERR: xhr.status=" + xhr.status + ", xhr.statusText=" + xhr.statusText + "\nstatus=" + status + ", error=" + error );
                 },

        success: function(rdata, status){
                    alert("Success!\nstatus=" + status);
                 }
        });
}

How To Trigger Azure Automation Web Hook From A Web Browser AJAX Call?

1 Answers1