Django 后端、React 前端和 CSRF Post

Question

在我的场景中，我在我的 React 前端使用了一个表单（http://localhost:3000/submit) to post to my url http://localhost:8000/api/submit/

但是，我收到了这样的回复：

"detail": "CSRF Failed: CSRF token missing or incorrect."

我的class观点是这样的：

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

我有两个问题：

如何修饰 dispatch() 来免除 csrf？
如何向我的前端提供 CSRF？

**

Risadinha 的解决方案：

**

import cookie from "react-cookies";

...

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

Answer 1

您需要将 cookie 和 header 都设置为在加载反应页面的初始调用期间传输的 CSRF 令牌。

基本上，您需要读取从 Django 服务器传输的 cookie“csrftoken”的值，并将其设置为所有 [=30] 的 header“X-CSRFTOKEN”的值=] AJAX 在你的 React 应用程序中请求。一般最好完成（例如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 %}（在反应表单中）：

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

文档：https://docs.djangoproject.com/en/3.1/ref/csrf/

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})

当然你想保护这个请求，这样任何人都无法获取令牌。无论如何，这似乎违背了它的目的...

Django 后端、React 前端和 CSRF Post

Django backend, React frontend and CSRF Post

django

csrf

reactjs

Risadinha 的解决方案：