如何在JavaScript中配合Django API使用CSRF Token？解决请求被拒问题

一、修正后端视图的装饰器 #

你当前使用的@requires_csrf_token装饰器仅用于允许视图访问CSRF token，不会强制验证CSRF合法性。对于需要接收POST请求的API视图，应该使用@csrf_protect（函数视图）或CsrfProtectMixin（类视图）来开启CSRF验证：

• 函数视图示例：

  from django.views.decorators.csrf import csrf_protect
  
  @csrf_protect
  def SaveArchive(request, ...):
      # 你的POST请求处理逻辑
  

• 类视图示例：

  from django.views.decorators.csrf import csrf_protect
  from django.utils.decorators import method_decorator
  
  class SaveArchiveView(View):
      @method_decorator(csrf_protect)
      def post(self, request, ...):
          # 你的POST请求处理逻辑
  

二、前端JS正确携带CSRF Token #

Django要求POST请求必须携带CSRF Token，针对XMLHttpRequest，推荐通过请求头传递：

1. 先确认浏览器已存在csrftoken cookie（可通过开发者工具的Application→Cookies面板查看）。如果没有，需先访问包含{% csrf_token %}模板标签的页面，触发Django设置该cookie。
2. 在请求中添加X-CSRFToken请求头：

   // 获取CSRF Token的工具函数
   function getCookie(name) {
       let cookieValue = null;
       if (document.cookie && document.cookie !== '') {
           const cookies = document.cookie.split(';');
           for (let i = 0; i < cookies.length; i++) {
               const cookie = cookies[i].trim();
               if (cookie.substring(0, name.length + 1) === (name + '=')) {
                   cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                   break;
               }
           }
       }
       return cookieValue;
   }
   
   // 发送POST请求
   const csrftoken = getCookie('csrftoken');
   const xhr = new XMLHttpRequest();
   xhr.open('POST', '/api/save-archive/{...}/', true);
   xhr.setRequestHeader('Content-Type', 'application/json'); // 若发送JSON数据
   xhr.setRequestHeader('X-CSRFToken', csrftoken);
   xhr.onload = function() {
       // 响应处理逻辑
   };
   xhr.send(JSON.stringify(yourData));
   

   若发送表单格式数据，也可将CSRF Token作为表单字段csrfmiddlewaretoken提交。

三、检查CSRF_TRUSTED_ORIGINS配置 #

确保settings.py中的CSRF_TRUSTED_ORIGINS包含前端完整域名（带协议和端口）：

CSRF_TRUSTED_ORIGINS = ['https://your-frontend-domain.com', 'http://localhost:3000']

四、确认CsrfViewMiddleware的中间件顺序 #

在settings.py的MIDDLEWARE列表中，CsrfViewMiddleware需放在SessionMiddleware之后、AuthenticationMiddleware之前：

MIDDLEWARE = [
    # ...其他中间件
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    # ...其他中间件
]

内容的提问来源于stack exchange，提问作者Psionman