エラー403がajax経由でサーバーリクエストで禁止されています

Question

予定リストを追跡してサーバーから引き出すサイトで作業しています。 下記の2つのサンプルajaxコールがあります。タスクのGET呼び出しは正常に動作しますが、POSTの追加は機能しません。何らかの理由で、403の禁じられたエラーを返し、結果としてコードを実行しません。

私は403 Forbidden error when making an ajax Post request in Django framework を見ていましたが、@yohnによって投稿されたリンクを読んでいましたが、このソリューションを実装する方法を理解できません。 POSTリクエストを作るとき（あなたがトークンベースの認証を使用しているが、私はあなたがここにいないと仮定していない限り）

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はcsrfトークンが必要です。フォーム送信に{{ csrf_token }}を含める必要がある場合と同じです。これにaddの下であなたのAJAX呼び出しを変更、あなたの問題のためにそうWhat is a CSRF token ? What is its importance and how does it work?

：

$.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); 
     }, 
    }); 

あなたはそれとCSRFトークンの目的を必要とする理由の詳細については