Неверный CSRF или отсутствующий токен в DJango

Я уже проверил эту ссылку на Stackoverflow, но все еще сталкиваюсь с той же проблемой: CSRF verification failed. Запрос прерван. на django

О выпуске

Я пытаюсь отправить ajax запрос в DJango.

Html форма

<form id="frmLogin" method="post">
    {% csrf_token %}
    <input type="text" name="username" />
    <input type="password" autocomplete="false" name="password" />
    <input type="submit" value="Submit" />
</form>

Ajax

var data = {
    "username": $(form).find("input[name='username']").val(),
    "password": $(form).find("input[name='password']").val(),
    "csrfmiddlewaretoken": $(form).find("input[name='csrfmiddlewaretoken']").val()
};

$.ajax({
    method: "POST",
    url: "/authenticate/",
    cache: false,
    async: true,
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8",
    success: function(response) {                   
        
    }
})

Вид

from django.shortcuts import render
import json
from django.http import JsonResponse

def Authenticate(request):
    if request.method == "POST":
        #loginData = json.loads(request.body)
        #email = userData["email"]
        #password = userData["password"]
        print("ok")
        return JsonResponse({}, status = 200)
    else:
        print("not ok")

Информация о грузе

enter image description here

Сообщение об ошибке

enter image description here

enter image description here

Я ничего не пропустил?

Вам нужно добавить CSRF_TRUSTED_ORIGINS в файл settings.py и добавить в него ваш origin как доверенный origin для небезопасных запросов, таких как (POST запрос), вот так :

CSRF_TRUSTED_ORIGINS = ['https://your-domain.com']

Попробуйте прикрепить вашу форму к функции ajax следующим образом:

    const form = document.getElementById('frmLogin');

    var data = {
        "username": $(form).find("input[name='username']").val(),
        "password": $(form).find("input[name='password']").val(),
        "csrfmiddlewaretoken": $(form).find("input[name='csrfmiddlewaretoken']").val()
    };

    $('#frmLogin').submit(function() {
        $.ajax({
            method: "POST",
            url: "/authenticate/",
            cache: false,
            async: true,
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: function(response) {

            }
        })
    })

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

beforeSend: function(xhr, opts) {
    xhr.setRequestHeader('X-CSRFToken', $(form).find("input[name='csrfmiddlewaretoken']").val());
}
Вернуться на верх