调用Django Rest Framework中ModelViewSet接口时遭遇CORS错误

在Django+Django Rest Framework项目中，我通过ModelViewSet为Race资源搭建了CRUD接口，用Postman访问list方法完全正常。为解决Angular端的跨域问题，已经安装并配置了django-cors-headers，自定义APIView的测试GET接口能正常调用，但访问ModelViewSet的list接口时，无论是否启用CORS中间件都会报CORS错误，奇怪的是POST接口可以正常工作。

以下是相关代码配置：

RaceViewSet实现（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()

应用URL配置（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'),
]

项目配置（settings.py） #

ALLOWED_HOSTS = []

CORS_ORIGIN_WHITELIST = [
    'http://localhost:4200', # Angular服务地址
]

# 应用定义

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中间件
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

测试用APIView（TestView） #

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): # 逻辑和ModelViewSet的list方法一致
        races = Race.objects.all()
        serializer = RaceSerializer(races, many=True)
        return Response(serializer.data)

Angular端正常工作的GET请求代码 #

test(): void {
        const url = 'http://127.0.0.1:8000/api/v1/rpg/test'; // 调用测试接口
        
        this.http.get(url).subscribe(
            {
                next: (response) => {
                    console.log('SUCCESS', response);
                },
                error: (failResponse) => {
                    console.error('请求错误:', failResponse);
                },
                complete: () => {
                    console.log('测试完成:');
                }
            }
                
        );
    }

调用ModelViewSet list接口报错的代码 #

test(): void {
        const url = 'http://127.0.0.1:8000/api/v1/rpg/races'; // 尝试访问races列表
        
        this.http.get(url).subscribe(
            {
                next: (response) => {
                    console.log('SUCCESS', response);
                },
                error: (failResponse) => {
                    console.error('请求错误:', failResponse);
                },
                complete: () => {
                    console.log('测试完成:');
                }
            }
                
        );
    }

控制台错误信息 #

"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."

补充：可正常调用的POST请求代码 #

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
        }
        this.http.post(url,body).subscribe(
            {
                next: (response) => {
                    console.log('SUCCESS', response);
                },
                error: (failResponse) => {
                    console.error('请求错误:', failResponse);
                },
                complete: () => {
                    console.log('测试完成:');
                }
            }
                
        );
    }

内容的提问来源于stack exchange，提问作者Anibal Cardozo