Django 后端、React 前端和 CSRF Post

Question

在我的场景中，我在我的 React 前端( http://localhost:3000/submit )中使用了一个表单来发布到我的 url http://localhost:8000/api/submit/

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

"detail": "CSRF 失败:CSRF token 丢失或不正确。"

我的类(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 都设置为在加载 react 页面的初始调用期间传输的 CSRF token 。
基本上，您需要读取从 Django 服务器传输的 cookie "csrftoken"的值，并将其设置为响应应用程序中所有 post AJAX 请求的 header "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}" /> 

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