Django项目AJAX提交遇CSRF token缺失403错误求解决

你遇到的Forbidden (CSRF token missing.): /edit_post/33错误，核心原因是index.html中inline编辑的AJAX请求没有携带CSRF Token。edit_post.html里的AJAX已经正确处理了CSRF验证，但index页面中点击Edit按钮触发的saveChanges函数发送POST请求时，完全未添加CSRF验证信息，导致Django拒绝请求。

修复步骤 #

1. 给index.html的saveChanges函数添加CSRF Token #

修改saveChanges函数，在发送AJAX请求前加入CSRF Token请求头：

function saveChanges(postId, newContent) {
    // 获取页面中的CSRF Token
    var csrfToken = document.getElementsByName('csrfmiddlewaretoken')[0].value;
    
    // 初始化AJAX请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/edit_post/' + postId, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 添加CSRF Token请求头
    xhr.setRequestHeader('X-CSRFToken', csrfToken);
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('Post updated successfully');
            window.location.replace('/');
        } else {
            console.error('Error saving post');
        }
    };

    xhr.onerror = function() {
        console.error('Error saving post');
    };
    xhr.send('content=' + encodeURIComponent(newContent));
}

2. 更通用的CSRF Token获取方式（可选） #

如果页面中可能不存在csrfmiddlewaretoken元素（比如未加载新帖子表单），可以从Cookie中直接提取Token，兼容性更强：

// 新增通用函数获取CSRF Token
function getCsrfToken() {
    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, 10) === 'csrftoken=') {
                cookieValue = decodeURIComponent(cookie.substring(10));
                break;
            }
        }
    }
    return cookieValue;
}

// 修改saveChanges中的Token获取逻辑
function saveChanges(postId, newContent) {
    var csrfToken = getCsrfToken();
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/edit_post/' + postId, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('X-CSRFToken', csrfToken);
    
    // 后续请求处理逻辑不变
    // ...
}

验证修复 #

修改完成后，点击index页面的Edit按钮，编辑内容并保存，AJAX请求将正确携带CSRF Token，Django会正常处理请求并更新帖子内容。

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