Ошибка CORS между двумя локальными проектами Django и React

У меня есть проект Django, запущенный по этому URL-адресу http://127.0.0.1:8000, с этими настройками

DEBUG = True

INSTALLED_APPS = [
    ...
    
    'corsheaders',
    
    ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
    'django.middleware.common.CommonMiddleware',
    ...
]

ALLOWED_HOSTS = []

CORS_ALLOWED_ORIGINS = [
    'http://localhost:5173',
    'http://127.0.0.1:5173',
]

У меня есть проект React, запущенный по этому URL: http://localhost:5173 с этим App.jsx файлом

function App() {
  
  // Fetch tournaments from the server
  const [tournaments, setTournaments] = useState([]);

  useEffect(() => {
    fetch('http://127.0.0.1:8000/api/tournaments', {
      method: 'GET',
      mode: 'cors',
    })
      .then(response => response.json())
      .then(data => setTournaments(data))
      .catch(error => console.error('Error fetching tournaments:', error));
  }, []);
  return (
    <>
      <TournamentList tournaments={tournaments} />
    </>
  )
}

Этот запрос http://127.0.0.1:8000/api/tournaments выполняется с помощью Postman

Но у меня возникает эта базовая ошибка cors при использовании интерфейса React

Access to fetch at 'http://127.0.0.1:8000/api/tournaments' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Чего мне здесь не хватает?

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