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

Question

CSRF 令牌未添加到 XMLhttpRequest 的 header。

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

// [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请求。我收到的错误消息是 "Forbidden (CSRF token missing or incorrect.): /convert"

Answer 1

您没有传递 setRequestHeader 和 object，而是传递 header 和 value。请参阅文档 here.

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

此外，在设置请求之前header您需要将请求设置为打开。

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

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

Cannot add CSRF token to XMLhttpRequest for Django POST request

javascript

django

post

xmlhttprequest

csrf