DRF与React集成时登录认证的CORS跨域问题求助

问题根源 #

从错误信息来看，核心问题是预请求（OPTIONS）的响应中Access-Control-Allow-Credentials头为空，但前端请求的凭证模式是include（因为axios设置了withCredentials: true），根据CORS规则，此时该头必须设为true。结合代码和现象，问题出在Django的中间件顺序、配置项以及部分前端错误处理上。

解决步骤 #

1. 修正Django中间件顺序

corsheaders.middleware.CorsMiddleware必须放在django.middleware.common.CommonMiddleware之前，否则无法正确注入CORS响应头。修改settings.py中的MIDDLEWARE数组：

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

2. 补全ALLOWED_HOSTS配置

空的ALLOWED_HOSTS可能导致Django拒绝本地请求或无法正确设置Session Cookie，添加本地主机地址：

ALLOWED_HOSTS = ['localhost', '127.0.0.1']

3. 适配django-cors-headers版本配置

检查你的django-cors-headers版本：

• 版本 >= 3.10：保留CORS_ALLOWED_CREDENTIALS = True（当前配置正确）
• 版本 < 3.10：将配置改为CORS_ALLOW_CREDENTIALS = True（去掉ALLOWED_前缀）

可通过pip show django-cors-headers命令查看版本。

4. 修复前端错误处理逻辑

控制台的TypeError是因为网络请求失败时error.response可能为undefined，修改Login.jsx中的catch块：

catch (error) {
    console.log("Login failed:", error.response ? error.response.data : error.message);
}

5. 重启Django服务器

所有配置修改后，必须重启Django开发服务器，新配置才能生效。

验证方法 #

1. 启动Django和React服务
2. 打开浏览器开发者工具的Network标签
3. 触发登录请求，查看OPTIONS /api/login/的响应头：
   • 确认存在Access-Control-Allow-Credentials: true
   • 确认Access-Control-Allow-Origin: http://localhost:3000
4. 如果响应头正确，再检查POST请求是否能成功返回Session信息，且浏览器Application > Cookies中存在sessionid和csrftoken

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