已配置Django后端CORS仍遇Dio跨域问题求助

1. 检查Django中间件顺序 #

corsheaders.middleware.CorsMiddleware必须放在所有其他中间件最前面，尤其是django.middleware.common.CommonMiddleware之前，否则CORS响应头无法被正确添加。调整后的MIDDLEWARE配置示例：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 以下是其他中间件
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

2. 修正Dio请求的序列化方式 #

你当前手动用jsonEncode处理请求数据，会导致Dio无法自动设置正确的Content-Type头，可能触发异常预检请求。修改请求代码：

// 移除jsonEncode，直接传入Map结构数据
final response = await dio.post<Map<String, dynamic>>('/auth/token/',
          data: {Config.username: username, Config.password: password});

若必须手动序列化，需显式指定Content-Type：

final response = await dio.post<Map<String, dynamic>>('/auth/token/',
          data: jsonEncode({Config.username: username, Config.password: password}),
          options: Options(headers: {'Content-Type': 'application/json'}));

3. 排查CSRF中间件影响 #

如果Django启用了django.middleware.csrf.CsrfViewMiddleware，Flutter Web请求未携带CSRF令牌可能导致预检失败。可通过两种方式处理：

• 给API视图添加@csrf_exempt装饰器跳过验证
• 在settings.py中添加信任源：

CSRF_TRUSTED_ORIGINS = ['http://localhost:63730', 'https://<你的前端域名>']

4. 验证Django CORS配置是否生效 #

用curl直接发起预检请求，检查响应头是否包含CORS相关字段：

curl -X OPTIONS https://<my_api_url>/api/auth/token/ \
-H "Origin: http://localhost:63730" \
-H "Access-Control-Request-Method: POST" \
-H "Access-Control-Request-Headers: Content-Type" \
-I

若响应头中没有Access-Control-Allow-Origin: *，说明CORS配置未生效，需重启Django服务，或检查是否有其他安全中间件覆盖了CORS头。

5. 检查前端代理配置差异（开发环境） #

React/Vue可能通过代理转发请求规避CORS，而Flutter Web未配置。可在Dio中设置代理指向本地Django服务：

_dio.options.proxy = 'http://localhost:8000'; // 替换为你的Django本地端口

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