Как предотвратить ошибку csrftoken при отправке через кнопку с JSON?

У меня очень мало знаний о JSON и JavaScript, но я не могу понять, в чем проблема моего кода. Я уже попробовал вот это csrf validation для справки, но все равно получаю ошибку csrftoken вместе с ошибкой fetch... Я предполагаю, что это как-то связано с $SCRIPT_ROOT, и мне очень нужно, чтобы это работало в моем Django проекте, так что, пожалуйста, скажите мне, в чем здесь проблема...

app.js 

onSendButton(chatbox) {
        var textField = chatbox.querySelector('input');
        let text1 = textField.value
        if (text1 === "") {
            return;
        }

        let msg1 = { name: "User", message: text1 }
        this.messages.push(msg1);

        fetch( $SCRIPT_ROOT+'/predict',{
            method: 'POST',
            body: JSON.stringify({ message: text1 }),
            mode: 'cors',
            headers: {
              'Content-Type': 'application/json',
              "X-CSRFToken": csrftoken
            },
          })
          .then(r => r.json())
          .then(r => {
            let msg2 = { name: "Sam", message: r.answer };
            this.messages.push(msg2);
            this.updateChatText(chatbox)
            textField.value = ''

        }).catch((error) => {
            console.error('Error:', error);
            this.updateChatText(chatbox)
            textField.value = ''
          });
    }

views.py

def predict(request):
    text=request.get_json().get('message')
    #check if text is valid
    response=get_response(text)
    message= {'answer':response}
    return JsonResponse(message)

base.html

<body>
      <div class="container">
    <div class="chatbox">
        <div class="chatbox__support">
            <div class="chatbox__header">
                <div class="chatbox__image--header">
                    <img src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-5--v1.png" alt="image">
                </div>
                <div class="chatbox__content--header">
                    <h4 class="chatbox__heading--header">Chat support</h4>
                    <p class="chatbox__description--header">Hi. My name is Sam. How can I help you?</p>
                </div>
            </div>
            <div class="chatbox__messages">
                <div></div>
            </div>
            <div class="chatbox__footer">
                <input type="text" placeholder="Write a message...">
                <button class="chatbox__send--footer send__button">Send</button>
            </div>
        </div>
        <div class="chatbox__button">
            <button class="btn-light"><img src="./images/chatbox-icon.svg" width="45px" height="45px"/></button>
        </div>
    </div>
</div>
</body>
<script>
 $SCRIPT_ROOT={{ url }}
 csrftoken={{ csrf_token }}
</script>

Вернуться на верх