Getting Cors error when calling functions from ModelViewSet in Django Rest Framework

This error is pretty odd, I have a project on Django with Django Rest Framework and I have an app with a ModelViewSet to create CRUD endpoints for my Race resource.

race.py

from ..models.race import Race
from ..serializers.race import RaceSerializer
from rest_framework.viewsets import ModelViewSet
from rest_framework.permissions import IsAuthenticated

class RaceViewSet(ModelViewSet):
    model = Race
    serializer_class = RaceSerializer
    queryset = Race.objects.all()

This is my app's urls.py

from django.urls import path, include
from rest_framework import routers


from .views.race import RaceViewSet
from .views.test import TestView


router = routers.DefaultRouter()
router.register(r'races', RaceViewSet)

urlpatterns = [
    path('', include(router.urls)),
    path('test', TestView.as_view(), name='test'),
]

I got everything set correctly, and I can access the list method without issues using Postman

Now Im aware of the CORS issue doesn't happen in Postman and installed 'django-cors-headers' to solve the CORS issue on my Angular app.

settings.py

ALLOWED_HOSTS = []

CORS_ORIGIN_WHITELIST = [
    'http://localhost:4200', # My angular server
]

# Application definition

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

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsMiddleware', # CORS middleware
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

And it works, I made a test route to check everything and inside my angular app I called that method

this is the test ViewSet

from rest_framework.views import APIView
from rest_framework.response import Response
from ..models.race import Race
from ..serializers.race import RaceSerializer

class TestView(APIView):
    def get(self, request): # I copied what the list method should in theory do.
        races = Race.objects.all()
        serializer = RaceSerializer(races, many=True)
        return Response(serializer.data)

home.component.ts

test(): void {
        const url = 'http://127.0.0.1:8000/api/v1/rpg/test'; // This time Im calling the test url
        
        // Send the HTTP POST request
        this.http.get(url).subscribe(
            {
                next: (response) => {
                    // Handle successful sign-up
                    console.log('SUCCESS', response);
                },
                error: (failResponse) => {
                    // Handle sign-up error
                    console.error('Sign-in error:', failResponse);
                },
                complete: () => {
                    console.log('Test completed:');
                }
            }
                
        );
    }

Of course just to double check if the CORS middleware was actually working I removed the middleware from settings.py and tried the test route again and as espected I got the CORS error, but putting the middleware again made the test route work just fine.

But when trying to access the routes defined on my ModelViewSet, particularly the list Im getting a CORS error with or without the middleware

home.component.ts

test(): void {
        const url = 'http://127.0.0.1:8000/api/v1/rpg/races'; // Trying to access the races list this time
        
        // Send the HTTP POST request
        this.http.get(url).subscribe(
            {
                next: (response) => {
                    // Handle successful sign-up
                    console.log('SUCCESS', response);
                },
                error: (failResponse) => {
                    // Handle sign-up error
                    console.error('Sign-in error:', failResponse);
                },
                complete: () => {
                    console.log('Test completed:');
                }
            }
                
        );
    }

And Im getting this error on console.

"Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/v1/rpg/races' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Again, Im sure the route works fine, I tried it in Postman without issues, so Im kinda in the dark here, I hope you guys can help me

EDIT--

Oddly enough, the POST method seems to be working just fine :/, Im still struggling with the GET method

home.component.ts

test(): void {
        const url = 'http://127.0.0.1:8000/api/v1/rpg/races/'; 
        
        let body = {
            "name": "Lowlander",
            "hp_growth": 1.9,
            "mp_growth": 1.1,
            "str_growth": 1.7,
            "int_growth": 1.2,
            "dex_growth": 1.3,
            "base_hp": 150,
            "base_mp": 100,
            "base_str": 85,
            "base_int": 70,
            "base_dex": 75
        }
        // Send the HTTP POST request
        this.http.post(url,body).subscribe(
            {
                next: (response) => {
                    // Handle successful sign-up
                    console.log('SUCCESS', response);
                },
                error: (failResponse) => {
                    // Handle sign-up error
                    console.error('Sign-in error:', failResponse);
                },
                complete: () => {
                    console.log('Test completed:');
                }
            }
                
        );
    }

Try with this:

CORS_ALLOWED_ORIGINS = [
'http://localhost:4200'
]

Im an idiot, the issue was that I needed to add a / at the end of the route

with this url it works just fine :')

const url = 'http://127.0.0.1:8000/api/v1/rpg/races/';