Next.js前端向Django REST后端POST请求时出现CORS错误求助

问题分析 #

你遇到的CORS错误，虽然Postman测试正常、也配置了CORS头，但大概率是Django的CORS中间件未正确配置或CORS设置存在冲突导致的。

修复步骤 #

1. 确保django-cors-headers中间件已正确添加

这是最容易忽略的关键步骤：在settings.py的MIDDLEWARE列表中，必须把CorsMiddleware放在CommonMiddleware之前，否则CORS头不会被注入到响应中：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 必须放在此位置
    'django.middleware.common.CommonMiddleware',
    # 其他你的中间件（比如AuthenticationMiddleware等）
]

2. 清理冲突的CORS配置

你的settings.py里存在冗余且冲突的配置：

• CORS_ALLOW_ALL_ORIGINS = True会直接忽略CORS_ALLOWED_ORIGINS和CORS_ORIGIN_WHITELIST的设置
• CORS_ORIGIN_WHITELIST是旧版配置项，新版已被CORS_ALLOWED_ORIGINS替代，而且你填的是后端自己的地址（localhost:8000），完全无效

根据你的环境选择以下一种配置：

开发环境（快速允许所有源）

# 允许所有跨域请求（仅开发环境使用）
CORS_ALLOW_ALL_ORIGINS = True

# 允许的请求方法（保持你的配置即可）
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

生产/严格环境（仅允许指定前端源）

CORS_ALLOW_ALL_ORIGINS = False

# 明确允许你的Next.js前端地址
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
]

CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

3. 验证后端视图处理OPTIONS请求

django-cors-headers会自动处理预检OPTIONS请求，但如果你的视图或自定义中间件对OPTIONS请求做了额外的权限校验，确保允许OPTIONS请求无需认证即可通过。

4. 前端代码小优化（非必须，但更规范）

• 表单的method="POST"可以删除，因为你已经用axios手动发送请求，且event.preventDefault()阻止了默认表单提交逻辑
• 可以给axios配置baseURL，避免硬编码后端地址：

const axiosInstance = axios.create({
  baseURL: 'http://127.0.0.1:8000',
  headers: {
    'Content-Type': 'application/json'
  }
});

// 提交时使用：
const res = await axiosInstance.post("/message-post/", postData);

为什么之前的配置无效？ #

最可能的原因是未添加CorsMiddleware到中间件列表，导致Django没有在响应中注入CORS相关的头信息，即使你配置了CORS参数也不会生效。其次是冗余的配置项造成了混淆，比如无效的CORS_ORIGIN_WHITELIST设置。

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