使用 Vue.js 和 Django Rest Framework 的 POST 方法中的 CSRF_Token答案

【问题标题】：CSRF_Token in POST method using Vue.js and Django Rest Framework使用 Vue.js 和 Django Rest Framework 的 POST 方法中的 CSRF_Token
【发布时间】：2023-04-06 14:55:01
【问题描述】：

我正在尝试从 Vue.js 模板向我使用 Django 创建的 API 发送 POST 请求。发送时，我收到 403 CSRF 令牌丢失或错误错误。由于我将正面和背面分开，因此我在 Django 端没有带有 {csrf_token} 的视图。

如何发送我的表格？

我在网上尝试了一些使用 cookie 的示例，但我是初学者，需要更多关于 POST 主题和 CSRF 的解释

我有一个像这样的 Djano 视图（和相关的 url）：

def get_csrf_token(request):
token = get_token(request)
return JsonResponse({'token': token})

当我请求 url 时，获得了带有令牌的 JSON。

在前端我使用这种方法来获取令牌：

getToken: function() {
                this.loading = true;
                this.$http.get('/qualite/get-token/')
                    .then((response) => {
                        this.token =response.data;
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    })
            },


addNc: function() {
                    let headers = {
                        'Content-Type': 'application/json;charset=utf-8'
                    };
                    if(this.token !== '') {
                        headers['HTTP_X-XSRF-TOKEN'] = this.token
                    }

                    this.loading = true;
                    this.$http.post('/qualite/api/nc/',this.newNc, {headers: headers})
                        .then((response) => {
                            this.loading = false;
                        })
                        .catch((err) => {
                            this.loading = false;
                            console.log(err)
                        })
                },

【问题讨论】：

标签： django vue.js django-rest-framework csrf

【解决方案1】：

对于CSRF，如果您使用SessionAuthentication（这是DRF 中使用的默认身份验证），则用户登录后默认使用session。

您必须在标头中的每个请求中发送它，您可以参考this link 以了解有关已发送标头的更多信息，因为它的名称已更改并且可以配置。

还要注意，在设置中，您必须确保 CSRF_COOKIE_HTTPONLY 设置为 False（这是默认设置），以便能够从客户端 JS 读取它。

另一种方法是删除每个请求的 CSRF 强制执行（但出于安全考虑，强烈不推荐），您可以在答案 here 中找到更多相关信息。

【讨论】：

感谢您的回答。不幸的是，我实际上并没有使用会话。有必要吗？
没人能帮我吗？
嗨@ROGGYQUENTIN，你有解决这个问题的办法吗？

【解决方案2】：

使用基于令牌的身份验证。

【讨论】：

【解决方案3】：

我遇到了同样的问题，

问题是，我使用了基于类的视图，在注册 url 时我忘记用类名提及 as_view()。

ex:- class PostData(APIView)

before :- path('post_data', PostData)

after correction:- path('post_data', PostData.as_view())

【讨论】：