解决Django与Vue/Ajax交互时的CSRF验证失败问题

追风的人

发布时间：2026-10-13| 3人浏览过

原创

本文介绍了在使用jQuery Ajax与Django后端进行数据交互时，如何正确处理CSRF验证。针对非Django模板渲染场景下提交表单遇到的CSRF Check Failing错误，提供了通过JavaScript获取csrftoken并手动添加到请求头中的完整解决方案，确保前后端通信安全顺畅。

Django与Ajax交互中的CSRF问题

在前后端分离或混合开发场景中，前端常使用jQuery的ajax方法与Django后端进行数据交互。在此过程中，开发者经常会遇到Django默认的CSRF（跨站请求伪造）保护机制导致的拦截问题。

以下是初始尝试传输数据时使用的代码方法：

初始Ajax请求代码示例


 $(function() {
  $.ajax({
   url: 'account/register',
   type: 'post',
   dataType:'json',
   data: $('#form1').serialize(),
   success: function (result) {
   console.log(result);
   if (result) {
    alert("result");
   }
   },
   error: function () {
   alert("error");
   },
  })
  })
 })

对应的Django后端处理代码如下：

Django后端视图处理逻辑


def register(request):
 if request.method=="POST":
  if request.POST.get('name'):
   return render(request,'success.html')
  else:
   return HttpResponse("账号不能为空“)

当直接提交表单时，浏览器会收到CSRF验证失败的错误提示。

如果前端页面由Django直接渲染，解决此问题非常简单，只需在HTML表单中添加{% csrf_token %}标签即可。然而，在当前这种前后端分离或通过Ajax异步提交的情况下，该静态标签无法直接生效。经过查阅资料，找到了一种通过JavaScript动态处理CSRF Token的解决方案，完整代码如下：

解决CSRF验证失败的完整方案


 $(function() {
  $('#sub').click(function () {
  $.ajaxSetup({
   beforeSend: function(xhr, settings) {
   function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
     var cookie = jQuery.trim(cookies[i]);
     // Does this cookie string begin with the name we want?
     if (cookie.substring(0, name.length + 1) == (name + '=')) {
     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
     break;
     }
    }
    }
    return cookieValue;
   }
   if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
    // Only send the token to relative URLs i.e. locally.
    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
   }
   }
  });
  $.ajax({
   url: 'account/register',
   type: 'post',
   dataType:'json',
   data: $('#form1').serialize(),
   success: function (result) {
   console.log(result);
   if (result) {
    alert("result");
   }
   },
   error: function () {
   alert("success");
   },
  })
  })
 })

应用上述代码后，表单即可成功提交，CSRF验证通过。

该方法的灵感来源于StackOverflow上的讨论：https://stackoverflow.com/questions/5100539/django-csrf-check-failing-with-an-ajax-post-request

以上关于Django与前端（如Vue或jQuery）实现数据交互并解决CSRF问题的方法就是全部内容，希望能为遇到类似问题的开发者提供参考。