Forbidden (CSRF-токен отсутствует или неверен.) как отправить CSRF-токен с фронтенда на бэкенд?

У меня есть проект Django, в котором мне нужно отправить строку даты из фронтенда в бэкенд. На фронтенде я использую метод javascript fetch

async function getCustomerInDeliveryDate(deliveryDate : String) {
    const response = await fetch('getCustomerInTripDate', {
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json',
        },
        body: JSON.stringify({
            deliveryDate :  deliveryDate
        }),
    });
    return response
}

Из бэкенда Django я сейчас реализовал простой метод, который возвращает строку обратно во фронтенд

class GetCustomerInTripDate(LoginRequiredMixin, View):
    def post(self, request, *args, **kwargs):
        print('Backend received call from front end!!!!!!!!!!!!!')
        return JsonResponse({'data': ['hello', 'world']}, status = 200)

Ошибка, которую я получаю, когда пытаюсь отправить на бэкенд: 

Forbidden (CSRF token missing or incorrect.): /staff/getCustomerInTripDate

Я не уверен, как отправить токен csrf. Все исследования, которые я провел до сих пор, указывают на то, что учетные данные должны быть установлены как "same-origin", и я попробовал это, но все равно получаю ту же ошибку.

Токен CSRF по умолчанию хранится в виде cookie. Поэтому вы должны получить cookie с помощью javascript, а затем отправить маркер.

Или вы можете сделать конечную точку restful endpoint.

Вам просто нужно добавить {% csrf_token %} в шаблон.

Если вы используете обычную HTML форму, поместите его внутрь формы.

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit">
</form>

Если вы используете Ajax, не имеет значения, где вы его разместите, вам просто нужно добавить его к данным POST

submitData = {
  
  // other data

  'csrfmiddlewaretoken': $("[name=csrfmiddlewaretoken]").val()
};

$.ajax({
  method: 'post',
  url: 'some_url',
  data: submitData,
  success: function(data){
    // do things
  },
  error: function(event,xhr,settings,errorText){
    // do error things
  }
});

Ошибка, которую вы получаете, - это Cross Site Request Forgery (CSRF)

Подробное объяснение здесь https://docs.djangoproject.com/en/4.1/ref/csrf/

Короче говоря, попробуйте добавить защиту {% csrf_token %} в шаблоны django.

<form action="" method="post">
    {% csrf_token %} <----- ADD THIS
......everything else goes here
</form>

Или, если вы не используете шаблоны django, попробуйте добавить декоратор csrf к вашему представлению. Я думаю, что это должно быть что-то вроде этого:

from django.utils.decorators import method_decorator<----- ADD THIS
    
@method_decorator(csrf_exempt, name='dispatch')<----- ADD THIS
class GetCustomerInTripDate(LoginRequiredMixin, View):
    def post(self, request, *args, **kwargs):
        print('Backend received call from front end!!!!!!!!!!!!!')
        return JsonResponse({'data': ['hello', 'world']}, status = 200)

Думаю, это должно сработать, надеюсь, это поможет. С наилучшими пожеланиями.

Вернуться на верх