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

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

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

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

Мы также избавились от переменной payload и просто поместили все в код 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.log(`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>

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

Возможно ли, что ваш код 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.log(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.log(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 сделан (нажав кнопку, таймер или что-то еще), эта глобальная переменная должна быть правильно установлена ​​и использована.