Question

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”

Answer 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();

Answer 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
    }

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

2 个答案: