Бэкэнд Django, веб-интерфейс React и CSRF Post - PullRequest
Новая
       5

Бэкэнд Django, веб-интерфейс React и CSRF Post

0 голосов
/ 26 сентября 2018

В моем кенарио я использую форму в своем интерфейсе реакции (http://localhost:3000/submit), чтобы публиковать на свой URL http://localhost:8000/api/submit/

Однако я получил этот ответ:

"detail": "CSRF Failed: токен 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"
/>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Это выглядит немного странно, но вы можете получить токен csrf в виде с помощью метода django.middleware.csrf.get_token().Поэтому я хотел бы сделать следующее представление: 

from django.http import JsonResponse

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

Конечно, вы хотите защитить этот запрос, чтобы никто не мог получить токен.Который, кажется, в любом случае побеждает цель ...

0 голосов
/ 26 сентября 2018

Вам необходимо установить и файл cookie, и заголовок для токена CSRF, передаваемого во время первоначального вызова, который загружает страницу реакции.

По сути, вам необходимо прочитать значение файла cookie "csrftoken", как переданос сервера Django и задайте его в качестве значения заголовка «X-CSRFTOKEN» для всех запросов AJAX поста в вашем приложении реагирования.Лучше всего сделать в целом (например, index.js).

Пример использования клиента axios (мы используем graphql) в React: 

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}" />
...