Django后端，React前端和CSRF发布

Question

在我的情况下，我在我的React前端（ http：// localhost：3000 / submit ）中使用一个表单发布到我的URL http：// localhost：8000 / api / submit /

但是，我收到了以下回复：

“ detail”：“ CSRF失败：CSRF令牌丢失或不正确。”

我的班级观点是这样的：

from rest_framework.views import APIView
from rest_framework.parsers import MultiPartParser, FormParser

class Submit(APIView):
    parser_classes = (MultiPartParser, FormParser)
    def post(self, request, *args, **kwargs):
        #custom post

我有两个问题：

1. 如何装饰dispatch（）来豁免CSRF？
2. 如何为前端提供CSRF？

**

Risadinha的解决方案：

**

import cookie from "react-cookies";

...

<input
 type="hidden"
 value={cookie.load("csrftoken")}
 name="csrfmiddlewaretoken"
/>

Answer 1

您需要将cookie和标头设置为CSRF令牌，以便在初始调用期间传输，从而加载react页面。

基本上，您需要读取从Django服务器传输的cookie“ csrftoken”的值，并将其设置为您的react应用中所有发布AJAX请求的标头“ X-CSRFTOKEN”的值。 通常最好完成（例如index.js）。

在React中使用axios（我们正在使用graphql）客户端的示例：

import axios from "axios";
import cookie from "react-cookies";

axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";

your_client.setHeaders({"X-CSRFTOKEN": cookie.load("csrftoken")});

如果没有ajax，则将cookie的值添加到这样的表单中-如果您不能使用模板标签{% csrf_token %} （以react形式）：

<input type="hidden" name="csrfmiddlewaretoken" value="{value-of-the-cookie}" /> 

Answer 2

这似乎有点棘手，但是您可以使用django.middleware.csrf.get_token()方法在视图中获取csrf令牌。 因此，我将提出这样的观点：

from django.http import JsonResponse

def get_csrf(request):
    csrf_token = django.middleware.csrf.get_token()
    return JsonResponse({'csrf_token':csrf_token})

当然，您希望保护此请求，以便任何人都无法获取令牌。 无论如何，这似乎打败了它的目的...