Django Rest Framework не может получить CSRF-токен от React
Я потратил на это шесть часов и до сих пор не могу справиться с получением CSRF Token и ID сессии.
У меня есть две простые функции:
@api_view(["GET"])
@ensure_csrf_cookie
def getCsrf(request):
return Response({'success': get_token(request)})
@method_decorator(csrf_exempt, name='post')
class LoginView(views.APIView):
permission_classes = (AllowAny,)
def post(self, request, format=None):
serializer = LoginSerializer(data=self.request.data, context={ 'request': self.request })
serializer.is_valid(raise_exception=True)
user = serializer.validated_data['user']
login(request, user)
return Response(None, status=status.HTTP_202_ACCEPTED)
У меня установлен corsheaders
и у меня такие настройки:
CORS_ALLOWED_ORIGINS = [
'http://127.0.0.1:3000',
'http://localhost:3000',
'http://127.0.0.1:8000',
'http://localhost:8000',
]
CSRF_TRUSTED_ORIGINS = [
'http://127.0.0.1:3000',
'http://localhost:3000',
'http://127.0.0.1:8000',
'http://localhost:8000',
]
CORS_ALLOW_HEADERS = ('Access-Control-Allow-Origin', 'Access-Control-Allow-Credentials', 'Authorization', 'Content-Type', 'Cache-Control', 'X-Requested-With', 'x-csrftoken')
CORS_ALLOW_CREDENTIALS = True
CSRF_COOKIE_HTTPONLY = False
SESSION_COOKIE_HTTPONLY = False
CSRF_USE_SESSIONS = False
CSRF_COOKIE_SECURE = False
SESSION_COOKIE_SECURE = False
SESSION_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SAMESITE = 'None'
Итак, оба этих куки появляются в ответах. Ни один из них не записывается в браузере. Я перепробовал все, что нашел. Это моя часть React
axios.defaults.withCredentials = true;
useEffect(() => {
axios.get(`http://127.0.0.1:8000/csrf/`)
.then(response => {
Cookies.set('csrftoken', response['data']['csrf']);
})
.catch(error => {
console.log(error);
});
}, []);
function onSubmit(e) {
e.preventDefault();
let data = {
username: e.target.username.value,
password: e.target.password.value
};
const config = {
headers: {
'content-type': 'application/json',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Origin': 'http://localhost:8000',
'X-CSRFToken': Cookies.get('csrftoken')
},
withCredentials: true,
crossDomain: true
}
axios.post(`http://127.0.0.1:8000/login/`, JSON.stringify(data), config)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
Я бы хотел не устанавливать cookies самостоятельно, как это сейчас происходит в useEffect, но я не могу заставить его работать. Я не знаю, как получить идентификатор сессии, я хочу, чтобы он работал, как полагается. Я пробовал Chrome и Firefox. Ни один из них не сохраняет эти куки
const get_cookie = (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]);
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
};
// then
get_cookie('csrftoken')