CSRF 验证失败。请求中止。我正在尝试将数据从 AJAX 发送到views.py，但它显示了此错误

Question

注册.html

 <form method="POST" id="someForm">
          {% csrf_token %}

          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required />

          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required />

          <label for="password">Password:</label>
          <input type="password" id="password" name="password" required />

          <input type="submit" value="Register" name="createuser" />
        </form>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
      let URLd = "{% url 'defaultpg' %}";
      let nameInput = document.getElementById("name");
      let emailInput = document.getElementById("email");
      let passwordInput = document.getElementById("password");
      const someForm = document.getElementById("someForm");

      someForm.addEventListener("submit", (e) => {
        e.preventDefault(); // prevent default behavior of the form

        var csrfToken = $("input[name='csrfmiddlewaretoken']").val();
        let nameValue = nameInput.value;
        let emailValue = emailInput.value;
        let passwordValue = passwordInput.value;
        let isNameValid = /^[a-zA-Z]+$/.test(nameValue);
        let isEmailValid = /^\S+@\S+\.\S+$/.test(emailValue);
        let isPasswordValid = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(
          passwordValue
        );

        if (isNameValid && isEmailValid && isPasswordValid) {
          alert("Successful");
          $.ajax({
            type: "POST",
            url: /defaultpg/,
            headers: { "X-CSRFToken": csrfToken },
            data: {
   
              name: nameValue,
              email: emailValue,
              password: passwordValue,
              csrfmiddlewaretoken: csrfToken,
            },
            
            dataType: "json",
            success: function (data) {
              // Handle success response
              alert("Successful msg");
            },
            error: function () {
              // Handle error response
              alert("Failure");
            },
          });
        } else {
          // Handle validation errors
          if (!isNameValid) {
            alert("Please enter a valid Name");
          } else if (!isEmailValid) {
            alert("Please enter a valid Email Address");
          } else {
            alert(
              "Password must contain letters, capital letter, small letter, special character, and numbers with a length above 8"
            );
          }
        }
        // rest of your logic goes here....
      });
    </script>

这是一个html文件，它接收来自表单的输入，然后传递给js，以便AJAX可以将数据发送到views.py 当调用 url ie /defaultpg 时，我收到 403 错误

urls.py

   path('defaultpg', views.defaultpg, name='defaultpg'),

Views.py

@csrf_protect
def defaultpg(request):
    print("-----------------------")
    if request.method == "POST":
        # Use request.POST.get() to retrieve form data
        name = request.POST.get("name")
        email = request.POST.get('email')
        password = request.POST.get('password')
        print(name, email, password)
        return render(request, 'Entry/login.html')

    # You may want to handle the case when the request method is not POST
    return render(request, 'Entry/login.html')

设置.py

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    'django.middleware.csrf.CsrfViewMiddleware',  # Include CSRF middleware only once
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

我尝试手动将 defaultpy 放入 url 中，它工作正常，但当我使用 ajax 执行此操作时，它现在不起作用

Answer 1

您必须在请求中将

withCredentials

参数设置为

true

。检查这个问题通过跨域帖子发送凭据？

Answer 2

首先通过执行

console.log(csrfToken)

确保您获得了 csrf 令牌

您需要做的另一件事是尝试传递数据，如下所示

data:function (d) {
    d.name = nameValue;
    d.email= emailValue;
    d.password= passwordValue
    d.csrfmiddlewaretoken = csrfToken;
    return d;
},