React调用Django REST Framework删除接口报CORS预请求重定向错误如何解决

该报错由两个核心问题共同触发：

• Django默认的地址重定向规则拦截了跨域预检请求：你当前请求的接口地址末尾缺少/，Django的APPEND_SLASH默认配置会自动将不带斜杠的请求重定向到带斜杠的地址，而浏览器规范明确禁止预检OPTIONS请求重定向
• 后端CORS配置未正确放行跨域请求的源与请求方法

1. 修正前端请求地址 #

首先调整React侧DELETE请求的地址，末尾补加/，即把原地址http://127.0.0.1:8000/api/events/delete/3修改为http://127.0.0.1:8000/api/events/delete/3/，优先规避重定向触发逻辑。

2. 配置Django后端CORS规则 #

首先确保已安装django-cors-headers依赖，未安装可执行命令：
pip install django-cors-headers

随后修改项目settings.py文件，更新以下配置：

# 注册corsheaders应用
INSTALLED_APPS = [
    # ... 其他原有应用
    'corsheaders',
    # ... 其他原有应用
]

# 注册CORS中间件，必须放在CommonMiddleware之前
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ... 其他原有中间件
]

# 放行前端开发地址
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000"
]

# 放行所有需要的请求方法，包含DELETE
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

3. （可选）修改地址校验规则 #

如果你不希望强制接口地址末尾加斜杠，可以在settings.py中添加配置关闭默认重定向规则：
APPEND_SLASH = False
同时调整DRF路由的地址规则，统一使用不带斜杠的路径格式即可。

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