无法将 CSRF 令牌添加到 Django POST 请求的 XMLhttpRequest答案

【问题标题】：Cannot add CSRF token to XMLhttpRequest for Django POST request无法将 CSRF 令牌添加到 Django POST 请求的 XMLhttpRequest
【发布时间】：2019-12-22 07:36:09
【问题描述】：

CSRF 令牌未添加到 XMLhttpRequest 的标头中。

为了确保所有其他代码都能正常工作，我尝试使用对服务器的 GET 请求，并且一切正常。但是，当我将 CSRF 令牌添加到标头时，代码在添加标头时停止运行。

// [PROBLEM CODE]
// Initialize new request
const request = new XMLHttpRequest();
const currency = document.querySelector('#currency').value;

request.setRequestHeader({'csrfmiddlewaretoken': csrftoken}); // [<---HERE]
request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); // [<---HERE]

request.open('POST', '/convert');


// [THIS WORKS]
// Initialize new request
const request = new XMLHttpRequest();
const currency = document.querySelector('#currency').value;
request.open('GET', '/convert');
request.send();

当我取出两行有问题的代码时，setRequestHeader 并发出 POST 请求。我收到的错误消息是“禁止（CSRF 令牌丢失或不正确。）：/convert”

【问题讨论】：

标签： javascript django post xmlhttprequest csrf

【解决方案1】：

您传递的不是setRequestHeader 一个对象，而是一个header 和一个value。请参阅文档here。

来自reading this，我认为应该是'X-CSRFToken'。

另外，在设置请求头之前，你需要将请求设置为打开。

如果您将其更新为以下内容，它应该可以工作。

request.open('POST', '/convert');
request.setRequestHeader("X-CSRFToken", csrftoken); 
request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); 
request.send();

【讨论】：

您是否看到错误，或者只是没有被忽略？
没有被忽略，我添加了一个javascript警报，代码没有通过这两行代码。
@ArthurChoate 查看更新后的答案。尝试先将请求设置为open。好像文章错了，因为它没有先打开状态。它在这里工作，尽管有一个错误，因为 /convert 显然不存在 - jsfiddle.net/L1trg3ko
好东西@ArthurChoate

【解决方案2】：

Your Templates such as view.html:
...
<p>{% csrf_token %}<button onclick="your_event(this)">Name_button</button></p>
...

Your js:

function your_event(self) {
    var xhr = new XMLHttpRequest();
    csrftoken=self.parentElement.firstChild.value
    xhr.open('POST', 'your_site', true);
    xhr.setRequestHeader("X-CSRFToken", csrftoken);
    xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");   
    xhr.send();
      
    xhr.onreadystatechange = function() {
        your_function

    }
    something_else
    }

【讨论】：

请考虑在答案中添加进一步解释以补充提供的代码。