Как получить доступ к drf api из react после входа пользователя в систему в django

Я в основном использовал шаблоны Django для своего фронт-энда, и все работает хорошо. Я хочу изучить DRF и React и хочу, чтобы оба могли общаться друг с другом. У меня react работает на порту 3000, а react на 8000, поэтому происходит ошибка, и я не могу протестировать свой код, так как получаю ошибку 403 (запрещено). У меня есть следующее представление:

@api_view(['GET'])
@authentication_classes([SessionAuthentication, BasicAuthentication])
@permission_classes([IsAuthenticated])
def user_details_api(request, *args, **kwargs): 
    current_user = request.user
    id = current_user.id
    status = 200
    try:
        obj = CustomUser.objects.get(id=id)
        data = userSerializer(obj)
        return Response(data.data, status=status)
    except:
        status = 404
        return Response(status=404)

У меня есть следующая конечная точка реакции:

function loadUserInfo(callback){
  const xhr = new XMLHttpRequest();
  const method = 'GET';
  const url = "http://127.0.0.1:8000/api/userdetails";
  xhr.responseType = "json"; // Let the xhr request know that its getting a json 
  xhr.open(method, url); //This opens the request with the method and url entered
  xhr.onload = function(){
    console.log("This is the response: ",xhr.response)
    callback(xhr.response, xhr.status)
  }
  xhr.onerror = function(){
    callback({"message":"The request was an error"}, 400)
  }
  xhr.send();//Trigger that request
}

Я вижу в деталях, что учетные данные не были предоставлены, и мне интересно, как это исправить, так как учебник, который я смотрел, не предоставил ничего, кроме входа в систему на стороне django с помощью формы входа, которую я также сделал. Я также включил настройки CORS и доверенных источников, а также настройки drf:

ALLOWED_HOSTS = ['http://127.0.0.1','.cfe.sh','http://localhost','http://localhost:3000']
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = ['http://localhost:3000']
CSRF_TRUSTED_ORIGINS = ['http://localhost:3000','http://localhost:3000']
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication',
    ]
}

Я не уверен, как действовать дальше, большинство решений в интернете имеют дело с токенами, и я не уверен, что это единственное решение, особенно поскольку я не полностью использую react для фронт-энда, а страница входа отображается на Django. Любая идея, как действовать в моем случае, будет оценена по достоинству, так как мне нужно запустить только некоторые конкретные страницы с react, которые будут служить мне больше как практика, чем что-либо еще, где я буду удалять и обновлять данные. Я только начинаю изучать эту концепцию, но не могу протестировать код, когда мои конечные точки не взаимодействуют.

Что запущено на порту 8000? Вы упомянули, но не разрешили порт 8000.

Вернуться на верх