Javascript 使用fetch post请求进行正确的Django CSRF验证

我正在尝试使用JavaScript库向Django应用程序提交表单。然而，无论我做什么，它仍然抱怨CSRF验证

Ajax上的文档提到了我尝试过的方法

我还尝试了抓取并将其添加到表单数据中

这两种方法似乎都不起作用

以下是包含表单值和标题的基本代码：

let data = new FormData();
data.append('file', file);;
data.append('fileName', file.name);
// add form input from hidden input elsewhere on the page
data.append('csrfmiddlewaretoken', $('#csrf-helper input[name="csrfmiddlewaretoken"]').attr('value'));
let headers = new Headers();
// add header from cookie
const csrftoken = Cookies.get('csrftoken');
headers.append('X-CSRFToken', csrftoken);
fetch("/upload/", {
    method: 'POST',
    body: data,
    headers: headers,
})

---

我可以通过JQuery实现这一点，但我想尝试使用

fetch

解决这个问题。问题是

fetch

简单的解决方案是向请求中添加

凭证：“同源”

，它可以工作（使用表单字段，但不使用标题）。以下是工作代码：

let data = new FormData();
data.append('file', file);;
data.append('fileName', file.name);
// add form input from hidden input elsewhere on the page
data.append('csrfmiddlewaretoken', $('#csrf-helper input[name="csrfmiddlewaretoken"]').attr('value'));
fetch("/upload/", {
    method: 'POST',
    body: data,
    credentials: 'same-origin',
})

---

你的问题很接近成功。如果您不想要form方法，这里有一个json方法。顺便说一句，@Cory的表单方法非常简洁

第三图书馆的整洁方式

let数据={
“文件”：文件，
“fileName”：file.name，
};
//您必须下载第三个Cookies库
// https://docs.djangoproject.com/en/dev/ref/csrf/#ajax
让csrftoken=Cookies.get（'csrftoken'）；
let response=fetch（“/upload/”{
方法：“POST”，
正文：JSON.stringify（数据），
标题：{“X-CSRFToken”：CSRFToken}，
})

二,。 另一个麻烦的方法，但没有任何第三个库

let数据={
“文件”：文件，
“fileName”：file.name，
};
让csrftoken=getCookie（'csrftoken'）；
let response=fetch（“/upload/”{
方法：“POST”，
正文：JSON.stringify（数据），
标题：{“X-CSRFToken”：CSRFToken}，
})
//以下函数正在从复制
// https://docs.djangoproject.com/en/dev/ref/csrf/#ajax
函数getCookie（名称）{
var-cookieValue=null；
if（document.cookie&&document.cookie！=''）{
var cookies=document.cookie.split（“；”）；
对于（变量i=0；i

谢谢，这是迄今为止我见过的最简单的解决方案，它像一个符咒一样工作。@Dr.DOOM我想是的，您只需要使用特定于烧瓶的方式访问令牌并将其传递给视图。