I have the following JS code in my django template:
fetch("http://127.0.0.1:8000/api/endpoint", {
method: "POST",
body: $("#form").serializeArray(),
}).then(function(data) {
});
In the api/endpoint, I just get:
Forbidden (CSRF token missing or incorrect.): /api/endpoint
How do I add the csrf token in the fetch?
I have the following JS code in my django template:
fetch("http://127.0.0.1:8000/api/endpoint", {
method: "POST",
body: $("#form").serializeArray(),
}).then(function(data) {
});
In the api/endpoint, I just get:
Forbidden (CSRF token missing or incorrect.): /api/endpoint
How do I add the csrf token in the fetch?
Share Improve this question asked Jun 16, 2020 at 19:59 user12989805user129898053 Answers
Reset to default 4I was having issues with this for hours on a similar project. I finally found the solution! I hope this information helps. The script I'm using is not on the django template, so using csrfmiddlewaretoken: '{{ csrf_token }}' wouldn't work for me.
I added in the "credentials": 'same-origin' as listed above, but also included "X-CSRFToken": getCookie("csrftoken"), which uses the function included at the bottom. It was this second bit that I needed. So your code should look something like:
fetch("http://127.0.0.1:8000/api/endpoint", {
method: "POST",
body: $("#form").serializeArray(),
credentials: 'same-origin',
headers: {
"X-CSRFToken": getCookie("csrftoken")
}
})
.then(function(data) {
})
.catch(err => console.log(err));
Then you need this function added:
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// 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;}
And of course the method has to be on the same page. Taken from Django Docs. https://docs.djangoproject./en/1.11/ref/csrf/#ajax
I found this information from this post: https://stackoverflow./a/43943556 from user Ska
Inside your body, you can pass the csrf token inside your ajax request like this:
body : {
// Other stuff
csrfmiddlewaretoken: '{{ csrf_token }}'
}
This should solve your problem.
Edit : Fetch doesn't include Cookies by default inside its request. To do so you need to add this line inside your fetch request as on option:
credentials : 'include' // For Cors
credentials : 'same-origin' // For same origin requests
In my case I was using plain Javascript and Django.
I had to hide a {% csrf_token %} in my HTML layout so that I could access it in my fetch request as follows:
HTML template:
<head>
<title>Page title</title>
{% csrf_token %}
</head>
index.js:
csrf_token = document.getElementsByName('csrfmiddlewaretoken')[0].value
fetch(`${url}`, {
method : 'put',
body : JSON.stringify(your_dat),
headers: { "X-CSRFToken": csrftoken },
credentials : 'same-origin',
})
it may not be the most beatiful code
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744395481a4572120.html
评论列表（0条）