Кто-нибудь делился токеном CRSF между React и Django, не сталкиваясь с Forbidden 403?
Я пытался выполнить простую конечную точку, которую я сделал доступной с помощью Django, из моего фронтенда, React. Это POST-запрос, который проверяет, существует ли URL. Это просто демонстрация, чтобы я мог ознакомиться с процессом полного стека. Проблема в том, что при любой попытке протестировать эту конечную точку вне React, я получаю журнал ошибок Forbidden: CSRF token missing or incorrect
в консоли Django, в то время как внутри React я просто не могу получить запрос. Вот что у меня есть:
Релевантный код
views.py
def check_url(request, url):
headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"}
r = requests.get(url, headers=headers)
return HttpResponse(status=r.status_code)
component.jsx
//django crsf token for api
const 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 = $.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) === name + "=") {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
};
//handles making api call with the cookie
const APIcall = () => {
var csrftoken = getCookie("csrftoken");
fetch("http://127.0.0.1:8000/check_url/", {
credentials: "include",
method: "POST",
mode: "same-origin",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"X-CSRFToken": csrftoken,
},
body: {
"url":
"https://stackoverflow.com/questions/50732815/how-to-use-csrf-token-in-django-restful-api-and-react",
},
});
};
Выход
Вывод при каждом вызове функции с помощью React составляет Unhandled Rejection (TypeError): Failed to fetch
без журнала попыток в Django.
Вывод при каждом вызове с использованием https://reqbin.com/ - 403 (Forbidden)
и лог в Django.
Что я пробовал
- Perused through stackoverflow and found a few helpful links that gave me some of my code like here, but it still resulted in no response
- Added
@ensure_csrf_cookie
to my view, but that didn't have any effect
Вот как далеко я зашел самостоятельно, просто слишком много неопределенностей, чтобы я мог действительно двигаться вперед. Например, код в views.py, похоже, работает, если https://reqbin.com/ может подключиться, но проблема в токене. Поскольку мой код React - единственное, что не оказывает никакого влияния на сервер, то мой fetch, вероятно, неправильный. Я просто не знаю, как он ошибается. Спасибо за любые советы.