«Запрещено (токен CSRF отсутствует или неверен):» с использованием Django и JS

Возможно ли, что ваш код Axios создается до того, как csrf_token отображается на странице (по шаблону django)?

Попробуйте что-то подобное в начале кода js:

var my_token = '{{ csrf_token }}';

затем, когда вы вызываете Axios, отправьте это значение вместо рендеринга {{ csrf_token }} в строке, так что-то вроде этого:

{
    let payload = {
        "csrfmiddlewaretoken": my_token,
        "math_problem": problem,
        "user_answer": userInput,
        "true_answer": correctAnswer,
        "question_status": questionStatus,
    }
    console.info(payload);
    axios.post('../api/scoring/submit_score_details', payload)
}

Мне также любопытно, видели ли вы, что ваш токен csrf печатается на консоли в коде, который вы показали (из распечатки полезной нагрузки), поскольку это указывало бы, был ли он отправлен или нет.

Если отправлялся csrf_token, возможно, с приложением возникла какая-то другая проблема, но как только у вас есть токен в my_token, вы можете распечатать его и убедиться, что он настроен правильно, и работать оттуда.

Хорошо, оглядываясь назад на обсуждение, я думаю, что могу знать, что здесь происходит...

Возможно, вы добавили "{{ csrf_token }}" в свой JS (где-то хранится в статическом коде) - это не сработает, поскольку, как вы указали, JS ничего не знает о шаблонах django.

Это можно сделать, изменив код JS так, чтобы он использовал переменную JS (например, my_token).

{
    let payload = {
        "csrfmiddlewaretoken": my_token, // populated later within form
        "math_problem": problem,
        "user_answer": userInput,
        "true_answer": correctAnswer,
        "question_status": questionStatus,
    }
    console.info(payload);
    axios.post('../api/scoring/submit_score_details', payload)
}

Это значение my_token будет предоставлено позже (в вашей форме) перед вызовом Axios. Для этого добавьте в форму:

<script>
    // This will be rendered by Django to get the actual string into my_token
    var my_token = "{{ csrf_token }}"; 
</script>

Затем, когда ваш вызов Axios будет выполнен (нажатием кнопки, таймера или чего-то еще), эта глобальная переменная должна быть правильно установлена ​​и использована.

В итоге я погуглил и спросил у друга. Мы придумали решение.

Нам пришлось добавить две строки кода, чтобы все заработало:

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

Мы также избавились от переменной «полезная нагрузка» и просто поместили все в код Axios.

{
        axios.defaults.xsrfCookieName = 'csrftoken';
        axios.defaults.xsrfHeaderName = 'X-CSRFToken';
        axios.post('../api/scoring/submit_score_details', {
            "math_problem": problem,
            "user_answer": userInput,
            "true_answer": correctAnswer,
            "question_status": questionStatus,
        });
        console.info(`Problem:${problem},
                     User Input: ${userInput},
                     Correct Answer: ${correctAnswer},
                     Question Status: ${questionStatus}`
                     );
    };

<div class = "col text-center">
    <button id = "new_problem_button" type = "button" class = "btn btn-primary btn-lg">
        New Problem
    </button>
    <p id = "math_problem"></p>
    <form id = "inputForm" method = "POST">
        {% csrf_token %}
        <input id = "user_input" autocomplete = "off" class = "form-control form-control-lg" type = "text" placeholder = "Type your answer here">
        <input id = "correct_answer" type = "hidden">
    </form>
    <br>
    <button id = "result_check" type = "button" class = "btn btn-primary btn-lg">Check</button>
    <script src = {% static 'js/game_logic.js' %}></script>
</div>

Вот ссылка, которая нам помогла.