Ajax post request front-end csrf token

Question

I'm trying to make a simple post request with ajax to a controller in plugin. The problem I'm having is that I always get a 400 Bad request because I don't send a valid CSRF Token.

But I can't figure out how to get this in javascript. I found multiple examples saying you get it by calling

Craft.getCsrfInput();

but this only works in "CP mode", on the front-end the Craft object is not available. I also found that importing it is not a good idea.

So anyone who can tell me how to do this?

Answer 1

You can take a look at the guide Enabling CSRF Protection

<script type="text/javascript">
    window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
    window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";
</script>

var data = {
    // ...
};

// Add the CSRF Token
data[csrfTokenName] = csrfTokenValue;

$.post('/some/url', data, function(response, textStatus, jqXHR) {
    // ...
});