CSRF Protection in AJAX post

Question

I'm having some trouble passing CSRF-tokens in my js-File in Craft 3.

I'm setting the values in my template like so:

<script type="text/javascript">
    window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName }}";
    window.csrfTokenValue = "{{ craft.app.request.csrfToken }}";
</script>

and call them in my .js-file:

var data = {id: 100 };
    data[window.csrfTokenName] = window.csrfTokenValue;
    $.ajax({
        type: 'POST',
        url: href,
        data: data,
        success: function(result){
        },
        error: function(){
        }
    });

before i set the csrf tokens, the server returned an error 400 – bad request – as you would expect. now i'm getting a 500 internal server error. What am I doing wrong?

The site works perfect without the ajax-call so I don't think there's an issue with my templates. Tell me if you need to see more of my code.

Answer 1

As Robin Schambach suggested I looked through my stack trace. The request was fine but php couldn't find the template used on ajax-requests due to a misspelling error.

Fixed the misspelling – works like a charm.