404 Error Controller Action From Jquery But Not Url

Question

I'm able to call my controller action directly from a url in the browser and get the proper response but when I call it from a page with js I get a 404 error. I'm working off the solution found here Call plugin controller from frontend with ajax but I receive the same issue.

My current code looks like:

<form id="call-support-form" action="" class="form" method="post" accept-charset="UTF-8">
            <input type="hidden" name="action" value="actions/sage-dashboards-module/sagedashboards/do-something">
            <input class="button" type="submit" value="Support adhérents">
</form>

    $("#call-support-form").submit( function(e) {

e.preventDefault();

var data = $(this).serialize();

$.ajax({
    method: 'POST',
    url: '/',
    data: data,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    success: function (response) {
            //  ...
        },
        error: function (XMLHttpRequest, textStatus) {
            console.log(XMLHttpRequest)
            console.log("Status: " + textStatus);
        }
})

});

Any ideas on what I've done incorrectly? I've gotten this working on previous projects using CraftCMS but for some reason nothing I try currently is changing anything.

Answer 1

From Craft CMS documentation page about requesting controller action:

when you send action as parameter, format should be without '/actions':

 <input type="hidden" name="action" value="plugin-handle/controller/action">

and you can directly open that URL directly- with 'actions' at the beginning as default actionTrigger - because:

By default, Craft makes an actions/ route available for appending any valid action path.

so http://craftsite/actions/plugin-handle/controller/action can be resolved when open that URL in a browser.