使用Django和JS的“禁止（CSRF令牌丢失或不正确。）：”

debugcn 发表于 Dev

斜线915

我正在JS代码中使用Axios进行POST请求，以将一些信息发送到本地托管的Django服务器。我的HTML代码格式中有{％csrf_token％}，但不知道如何使用Axios发送csrf令牌。

我在终端中收到此错误：“禁止（CSRF令牌丢失或不正确。）：/ api / scoring / submit_score_details”。

如何在axios帖子中正确插入csrf令牌？目前，我认为JS无法像我一样读取{{csrf_token}}。我一直在搜索Stack，但似乎大多数人都在使用jQuery或其他类型的JS。

为了节省空间，我没有发布有效负载中的变量，但它们只是字符串。

如果将@csrf_exempt放在views.py文件中我的函数上方，则可以消除错误。

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

<div class="col text-center">
    <button id="start" 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>

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

<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>

斜线915

因此，我最终做了一次谷歌搜索，并问了一个朋友。我们提出了一个解决方案。

我们必须添加两行代码才能使工作正常：

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>

这是对我们有帮助的链接。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。