Ajax Request an Backend Route wirft Fehler (400)

[agonyz]

Hallo Contao-Forum,

ich entwickel gerade eine Erweiterung und lasse mir in einem Service, den ich in den Controller meines Content-Elements injecte, ein RequestToken generieren (wie hier: https://docs.contao.org/dev/framewor...king-the-token)
Dieses übergebe ich dann an mein Twig-Template, wo ich es als hidden-Field ausgebe.

Danach versuche ich mit diesem Request Token einen Request an einen anderen Controller von mir zu machen.
Dies führt zu folgendem Fehler:

Invalid CSRF token. Please reload the page and try again.

Das Request-Token habe ich im Frontend überprüft. Hier funktioniert alles soweit bei der Generierung.
Der Controller funktioniert ebenfalls, da er mir eine gültige Antwort zurücksendet, wenn ich den token_check auf false setze.

Mein Ajax-Request sieht folgendermaßen aus:

<script>
    document.getElementById('sendBtn').addEventListener('click', sendRequest);
    var requestToken = document.getElementById('requestToken').value;

    var request =
    {
        'REQUEST_TOKEN': requestToken,
        'data': 'Some text and input'
    }

    function sendRequest() {
        fetch('/contao/agonyz/controller-route', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(request),
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }
</script> 

Kann mir vielleicht jemand helfen, wieso ich hier immer diesen Fehler erhalte?
Übergebe ich mein Request Token nicht richtig?

[Spooky]

In deinem JavasScript holst du dir den Request Token von einem HTML Element mit der ID "requestToken". Existiert so ein Element überhaupt? Wenn ja, hat dieses Element einen Request Token als "value"?

[agonyz]

In deinem JavasScript holst du dir den Request Token von einem HTML Element mit der ID "requestToken". Existiert so ein Element überhaupt? Wenn ja, hat dieses Element einen Request Token als "value"?

Hey Spooky, sorry hatte es mittlerweile hinbekommen.

Der Vollständigkeit wegen hier nochmal:

<script>
    document.getElementById('sendBtn').addEventListener('click', sendRequest);
    var requestToken = document.getElementById('requestToken').value;

    function sendRequest() {
        fetch('/contao/agonyz/controller-route', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: "data="+ JSON.stringify(Object.assign({}, memeData)) +"&REQUEST_TOKEN="+requestToken,
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }
</script> 

Nach der Umstellung von

'Content-Type': 'application/json' 

auf

'Content-Type': 'application/x-www-form-urlencoded' 

und der Anpassung im body hat es dann funktioniert.