通过ajax禁止服务器请求时出现错误403

Question

我正在处理一个跟踪待办事项列表并将其从服务器中取出的站点。 下面有两个示例ajax调用。任务GET调用工作正常，但是添加POST不。由于某种原因，它给了我一个403禁止的错误，因此，不执行代码。

我在看403 Forbidden error when making an ajax Post request in Django framework ，我读了@yohn发布的链接，但我不理解如何实现此解决方案。

var tasker = (function() { 
    return { 
     tasks : function(ownerId, cb) { 
      $.ajax({ 
       url: "http://138.49.184.143:3000/tasker/api/"+ownerId+"?key=f725ebbc9c", 
       type: 'GET', 
       success: function(task) { 
        if(task){ 
         var list = [] 
         for(var a=0; a<task.length; a++){     
          var newTask = { 
           onwerId: task[a].ownderId, 
           desc: task[a].desc, 
           due: new Date(task[a].due), 
           color: task[a].color, 
           complete: task[a].complete, 
           id: task[a].id 
          }; 
          list.push(newTask); 
         } 
         cb(list , null); 
        } 
        else{ cb(null, 'error retreiving your tasks');} 
       }, 
       error: function(xhr, status, errorThrown) { 
        alert("Sorry, there was a problem! " + errorThrown); 
       }, 
      });  
     }, 

     add : function(ownerId, task, cb) { 
      $.ajax({ 
       url: "http://138.49.184.143:3000/tasker/api/"+ownerId+"?key=f725ebbc9c", 
       type: 'POST', 
       success: function(task) { 
        var d = new Date(task.due); 
        if(task){ 
         var newTask = { 
          onwerId: task.ownderId, 
          desc: task.desc, 
          due: d, 
          color: task.color, 
          complete: task.complete, 
          id: task.id 
         }; 
         cb(newTask , null); 
        } 
        else{cb(null, 'error adding your task');} 
       }, 
       error: function(xhr, status, errorThrown) { 
        alert("Sorry, there was a problem! " + errorThrown); 
       }, 
      });    
     }, 
    }  

})(); 

Answer 1

的Django使POST请求时（除非您使用的是基于令牌身份验证，但我假设你是不是在这里）需要csrf令牌。这就像你需要在表单提交中包含{{ csrf_token }}一样。

有关为什么需要它和CSRF令牌的更多信息之目的：What is a CSRF token ? What is its importance and how does it work?

因此，对于你的问题，add下改变你的AJAX调用此：

$.ajax({ 
     url: "http://138.49.184.143:3000/tasker/api/"+ownerId+"?key=f725ebbc9c", 
     type: 'POST', 
     data: { csrfmiddlewaretoken: '{{ csrf_token }}'}, // added csrf token. 
     success: function(task) { 
      var d = new Date(task.due); 
      if(task){ 
       var newTask = { 
        onwerId: task.ownderId, 
        desc: task.desc, 
        due: d, 
        color: task.color, 
        complete: task.complete, 
        id: task.id 
       }; 
       cb(newTask , null); 
      } 
      else{cb(null, 'error adding your task');} 
     }, 
     error: function(xhr, status, errorThrown) { 
      alert("Sorry, there was a problem! " + errorThrown); 
     }, 
    });