Ich mache eine POST-Anfrage mit Axios in meinem JS-Code, um einige Informationen an meinen lokal gehosteten Django-Server zu senden. Ich habe {% csrf_token%} in meinem HTML-Code-Formular, weiß aber nicht, wie ich das CSRF-Token mit Axios senden soll.
Ich erhalte diesen Fehler im Terminal: "Verboten (CSRF-Token fehlt oder ist falsch.): / Api / Scoring / Submit_score_details".
Wie füge ich das csrf-Token korrekt in meinen Axios-Beitrag ein? Im Moment glaube ich nicht, dass JS {{csrf_token}} so lesen kann, wie ich es habe. Ich habe nach Stack gesucht, aber es scheint, dass die meisten Leute jQuery oder eine andere Art von JS verwenden.
Um Platz zu sparen, habe ich die Variablen in der Nutzlast nicht veröffentlicht, aber sie sind alle nur Zeichenfolgen.
Ich kann den Fehler beheben, wenn ich @csrf_exempt über meine Funktion in der Datei views.py setze.
{
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>Also habe ich gegoogelt und einen Freund gefragt. Wir haben eine Lösung gefunden.
Wir mussten zwei Codezeilen hinzufügen, damit alles funktioniert:
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
Wir haben auch die Variable 'payload' entfernt und einfach alles in den Axios-Code eingefügt.
{
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>Hier ist ein Link, der uns geholfen hat.
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen