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

Question

我在一个网站上工作，跟踪待办事项列表，并从服务器上提取它。下面有两个示例ajax调用。任务GET调用工作正常，但添加POST不工作。出于某种原因，它给我一个403禁止的错误，结果，不执行代码。

在Django框架中发出ajax Post请求时，我看到了403禁止的错误，我阅读了@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令牌的用途的更多信息：什么是csrf令牌？它的重要性是什么？它是如何工作的？

所以对于你的问题，改变你的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 );
        },
    });