React对接Django跨域问题：Access-Control-Allow-Origin缺失

问题核心原因 #

当请求携带Authorization这类自定义头时，浏览器会触发OPTIONS预检请求，如果后端未正确处理该请求或CORS配置存在问题，就会返回缺失Access-Control-Allow-Origin的错误。另外你前端请求中错误添加了后端才需要返回的Access-Control-Allow-Origin头，这会干扰预检流程。

具体修复步骤 #

1. 修正前端请求代码，移除错误请求头

Access-Control-Allow-Origin是后端响应给前端的头，前端发送请求时不需要添加，直接删除该字段：

fetch("https://subdomain.mydomain/get/id", {
  method: 'GET',
  headers: {
    'Authorization': `Token mytoken`,
    'Content-Type': 'application/json'
  }
}).then((res) => console.log(res));

2. 调整Django中间件顺序

CorsMiddleware需要放在所有中间件最前面，确保它能优先处理CORS相关逻辑，避免被其他中间件拦截：

# settings.py
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 移至首位
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'django.middleware.locale.LocaleMiddleware',
    'simple_history.middleware.HistoryRequestMiddleware',
    'debug_toolbar.middleware.DebugToolbarMiddleware',  # 调试工具中间件移至后面
]

3. 完善django-cors-headers配置

添加针对预检请求和自定义头的允许规则，确保OPTIONS请求能被正确响应：

# settings.py
# 允许所有请求方法（包含预检用的OPTIONS）
CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]

# 允许包含Authorization在内的自定义请求头
CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "origin",
    "user-agent",
]

# 如果需要携带Cookie等凭证，开启此项（可选）
CORS_ALLOW_CREDENTIALS = True

4. 验证预检请求处理

django-cors-headers会自动处理OPTIONS预检请求，无需在view中额外添加csrf_exempt或其他处理逻辑，你的view代码保持现有状态即可。

内容的提问来源于stack exchange，提问作者Yorbjörn