如何在JavaScript的JSON Fetch请求中添加CSRF Token？

核心原因 #

你之前在表单里加csrfmiddlewaretoken没用，是因为Fetch请求不会自动携带表单里的隐藏域参数——除非你把整个表单数据用FormData对象传递。如果是手动构造JSON或者自定义请求体，必须手动把CSRF Token加到请求头或者请求体里。

步骤1：获取CSRF Token #

Django提供了两种可靠的获取方式：

方式A：从页面meta标签获取

先在HTML页面里添加meta标签（可通过Django模板标签生成）：

<meta name="csrf-token" content="{% csrf_token %}">

然后用JS获取：

const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

方式B：从Cookie中获取

Django默认会给已登录用户（或访问过带CSRF保护页面的用户）设置csrftoken Cookie，直接用JS读取：

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();
            // 判断是否是目标cookie
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrfToken = getCookie('csrftoken');

步骤2：在Fetch请求中携带Token #

分两种请求场景：

场景1：发送表单数据（FormData）

如果你的请求是提交表单数据，可以直接把csrfmiddlewaretoken加到FormData里：

const form = document.getElementById('your-form');
const formData = new FormData(form);
// 如果表单里没自动添加，手动补充
formData.append('csrfmiddlewaretoken', csrfToken);

fetch('/post', {
    method: 'POST',
    body: formData
});

场景2：发送JSON数据

如果是发送JSON格式的请求体，必须把Token放到X-CSRFToken请求头里：

fetch('/post', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken
    },
    body: JSON.stringify({
        // 你的请求数据
        key: 'value'
    })
});

关键注意事项 #

• 确保请求的域名和Cookie的域名一致，避免跨域问题（Django的CSRF保护默认不允许跨域，除非配置了CSRF_TRUSTED_ORIGINS）
• 如果是React等单页应用，建议封装全局Fetch工具函数，统一添加CSRF Token，避免重复代码
• 不要直接硬编码Token，必须从页面或Cookie动态获取，因为Token会定期刷新

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