尽管正确发送令牌，Django 服务器仍报告“禁止（CSRF 令牌丢失或不正确。）”？

Question

我正在尝试向我的 Django 服务器发送 JSON POST 请求。

它报告此错误： Forbidden (CSRF token missing or incorrect.):

在我的 Django 模板options.html ，我这样说：

<script>const incomingToken = "{{ csrf_token }}";</script>

和这个：

<input type="hidden" name="csrf-token" id="csrf-token" value="{{ csrf_token }}" />

然后在我在客户端运行的 JavaScript 文件中，我说：

        const serverUrl = "http://127.0.0.1:8000/"
        const headers = new Headers({
            'Accept': 'application/json',
            // 'X-CSRFToken': getCookie("CSRF-TOKEN")
            "X-CSRFToken": document.getElementById("csrf-token").value
        })
        fetch(serverUrl, {
            method: "POST",
            headers: {
                headers
            },
            mode: "same-origin",
            body: JSON.stringify(editorState.expirationDate, editorState.contracts, editorState.theta) // FIXME: server goes "Forbidden (CSRF token missing or incorrect.)" and 403's
        }).then(response => {
            console.log(incomingToken)
            console.log(document.getElementById("csrf-token").value)
            console.log(response)
        }).catch(err => {
            console.log(err)
        });

incomingToken和document.getElementById("csrf-token").value报告相同的值。 所以我知道我得到了 CSRF 令牌的正确字符串。

怎么会这样？ 我究竟做错了什么？

作为参考，这是我在另一个主题中看到的内容：

const csrfToken = getCookie('CSRF-TOKEN');

const headers = new Headers({
        'Content-Type': 'x-www-form-urlencoded',
        'X-CSRF-TOKEN': csrfToken // I substitute "csrfToken" with my code's "incomingToken" value
    });
    return this.fetcher(url, {
        method: 'POST',
        headers,
        credentials: 'include',
        body: JSON.stringify({
            email: 'test@example.com',
            password: 'password'
        })
    });

我没有运行函数来从 cookie 中检索值，而是简单地使用{{ csrf_token }}插入 Django 嵌入的值。 我还尝试粘贴此线程中顶级答案中的代码，包括function getCookie(name) 。 没有。 客户端仍然说POST http://127.0.0.1:8000/ 403 (Forbidden) ，服务器仍然以相同的Forbidden (CSRF token missing or incorrect.)错误哭泣。

请提出建议！

更新：

所以我尝试了Django 的 CSRF protection docs page中的一个函数，内容如下：

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();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

无论出于何种原因，当我运行getCookie("csrftoken")时，此函数返回不同的值——该值与{{ csrf_token }}嵌入的值不同。 不知道该怎么做。 将其插入我的标题中的"X-CSRFToken"时，两者都"X-CSRFToken" 。

Answer 1

我找到了问题的解决方案。

当我忽略在 StackOverflow 上发现的大部分内容而选择仅使用 Django 文档时，解决方案就出现了。

我在我的 OP 中编写了我的代码——看看它是如何用new Headers()制作标题的？ fetch如何将serverUrl作为第一个参数插入？

好吧，我把它改成了这样：

const serverUrl = "http://127.0.0.1:8000/"
        const request = new Request(serverUrl, { headers: { 'X-CSRFToken': getCookie("csrftoken") } })
        fetch(request, {
            method: "POST",
            mode: "same-origin",
            body: JSON.stringify(editorState.expirationDate, editorState.contracts, editorState.theta)
        }).then(response => {
            console.log(response)
        }).catch(err => {
            console.log(err)
        });

它奏效了！

不同之处在于在fetch参数中使用了new Request()对象。