Как получить данные профиля пользователя из Django с помощью React?

Я создал Api, используя django rest framework (localhost/users/profile), который получает данные пользователя, если он вошел в систему. Он отлично работает, когда я вызываю API в бэкенде, когда пользователь вошел в бэкенд. введите описание изображения здесь

Но когда я пытаюсь получить доступ к тому же API из моего фронт-энда React, он не работает.

import React, { useEffect, useState } from "react"
import AuthContext from '../context/AuthContext'
import {Link} from 'react-router-dom'

const ProfilePage = () => {
    const [profiles, setProfiles] = useState([])
  
    const fetchData = async () => {
      const response = await fetch("http://127.0.0.1:8000/users/profile")
      const data = await response.json()
      setProfiles(data)
      console.log(data)
    }

  
    useEffect(() => {
      fetchData()
    }, [])
    
  
    return (
      <div>
        {profiles.length > 0 && (
          <ul>
            {profiles.map(profile => (
              <li key={profile.id}>{profile.name}</li>
            ))}
          </ul>
        )}
      </div>
    )
  }
  

export default ProfilePage

ошибка в консоли введите здесь описание изображения

ошибка сервера Backend введите описание изображения здесь

Я добавил учетные данные: "include" к моим запросам на выборку, но я все еще сталкиваюсь с той же проблемой. Мне очень нужна помощь. Я пробую различные решения уже несколько недель.

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