CORS Error between 2 local projects Django and React

I have a Django Project running on this url http://127.0.0.1:8000, with those settings

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',
]

I have a React project running on this url : http://localhost:5173 with this App.jsx file

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} />
    </>
  )
}

This request http://127.0.0.1:8000/api/tournaments is working using Postman

But I have this basic cors error when using the React Front

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.

What do I miss here ?

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