为什么我会收到 Javascript 请求的“CSRF Token Missing or Incorrect”错误

Question

I am trying to create request in Javascript when a button is clicked but instead receive the error Forbidden (CSRF token missing or incorrect.) . I have included {% csrf_token %} in the HTML template:

<form action="/cart" method="POST">
    {% csrf_token %}
    <button type="button" id="ordered">Place Order</button>
</form>

But am unsure if I have to include it in my Javascript request:

const request = new XMLHttpRequest();
request.open("POST", "/cart");

// send request
let data = new FormData();

items = localStorage.getItem(user + "items")
total = localStorage.getItem(user + "price")
data.append("items", items)
data.append("total", total)

request.send(data);

In my views.py :

def cart(request):
    if request.method == "POST":
        data = request.get_json()
        print(f"{data}")

        return HttpResponseRedirect(reverse("index"))
   else:
        return render(request, "cart.html")

Answer 1

您必须在每个 JavaScript 请求中发送 CSRF 令牌： https : //docs.djangoproject.com/en/2.2/ref/csrf/#ajax

Answer 2

To get rid of this error, simply append CSRF token to your json data or add it to headers as shown below.

...
headers: {'X-CSRFToken': '{{ csrf_token }}'}
...

or

...
headers: [{name: 'X-CSRFToken', value: csrfToken.value}],
...