React+Redux调用Django DRF接口遇301及CORS错误求助

1. 修复Django路由尾部斜杠问题 #

Django默认启用APPEND_SLASH配置（默认值为True），当请求URL不带尾部斜杠时，会返回301重定向到带斜杠的地址。浏览器处理跨域重定向时，容易触发CORS校验失败。

修改React中的API地址，添加尾部斜杠：

const CLASSES_API = `http://127.0.0.1:8000/learning/classes/?schoolPk=${id}`;

2. 修正ClassViewSet代码缺陷 #

你的ClassViewSet继承了ModelViewSet，但未定义默认queryset属性。尽管重写了get_queryset，部分DRF版本仍需要默认queryset来生成正确路由或完成权限检查。补充默认queryset并增加参数异常处理：

class ClassViewSet(viewsets.ModelViewSet):
    serializer_class = ClassSerializer
    queryset = Class.objects.all()  # 添加默认queryset

    def get_queryset(self):
        school_pk = self.request.query_params.get('schoolPk')
        if school_pk:
            return Class.objects.filter(school=school_pk)
        return Class.objects.none()  # 无参数时返回空集或全量数据，按需调整

3. 修正ALLOWED_HOSTS配置 #

ALLOWED_HOSTS仅需填写主机名（不带协议、端口和斜杠），当前配置中的http://localhost:3000/不符合要求，会导致Django拒绝请求。修改为：

ALLOWED_HOSTS = ['localhost', '127.0.0.1']

4. 清理冗余CORS配置 #

同时设置CORS_ALLOW_ALL_ORIGINS = True与CORS_ALLOWED_ORIGINS、CORS_ORIGIN_WHITELIST会导致配置冲突，保留核心配置即可：

CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_METHODS = [
    "DELETE", "GET", "OPTIONS", "PATCH", "POST", "PUT",
]
CORS_ALLOW_HEADERS = [
    "accept", "accept-encoding", "authorization", "content-type", 
    "dnt", "origin", "user-agent", "x-csrftoken", "x-requested-with",
]

5. 检查中间件顺序 #

确保corsheaders.middleware.CorsMiddleware排在django.middleware.common.CommonMiddleware之前，这是CORS中间件生效的关键：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 其他中间件...
]

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