CSRF令牌缺失或错误-在django和js中显示动态html内容

Question

我正在尝试使用本教程用ajax加载数据。我正在使用Django作为我项目的框架，不幸的是，数据不能正常加载，相反，我得到以下错误消息:"CSRF令牌丢失或不正确"。我假设我需要以某种方式将csrf令牌插入到请求中，但不太确定如何实现这一点。代码如下:

views.py

def ChapterListPL(request):
chapter_pl = ChapterPL.objects.filter(status=1).order_by('issue')
context = {
'chapter_pl': chapter_pl,
}
return render(request, 'comics/chapters_pl.html', context)

html文件

<div id="container"></div>
<input type="button" value="AJAX Load" onclick="aload();"/>
<script>
function aload() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "{% url 'chapter_pl' %}");
xhr.onload = function () {
document.getElementById("container").innerHTML = this.response;
};
xhr.send();
}
</script>

Answer 1

你必须在你的HTML中包含CSRF令牌，用JavaScript从DOM读取令牌，并通过X-CSRFTokenHTTP Header(由CSRF_HEADER_NAME设置指定)发送请求:

{% csrf_token %}
<script>
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
</script>  

<div id="container"></div>
<input type="button" value="AJAX Load" onclick="aload();"/>
<script>
function aload() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "{% url 'chapter_pl' %}");
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.onload = function () {
document.getElementById("container").innerHTML = this.response;
};
xhr.send();
}
</script>

查看使用AJAX和CSRF令牌的文档

Answer 2

默认情况下，所有的Django表单都是CSRF保护的，你的HTML输入元素也算作一个表单。要么在HTML中包含{% csrf_token %}标签，要么在views.py文件中包含@csrf_exempt装饰器。查看更多文档:

Django CSRF令牌