Django4与Angular跨域请求被CORS拦截问题排查

错误原因 #

错误提示明确指出：Request header field pragma is not allowed by Access-Control-Allow-Headers，这说明你的Django CORS配置中没有允许前端发送的pragma请求头，同时当前的CORS_ALLOW_HEADERS配置完全错误——你填的是CORS响应头字段，而非需要允许的前端请求头字段。

修正步骤 #

1. 修复CORS_ALLOW_HEADERS配置

将CORS_ALLOW_HEADERS修改为包含pragma以及前端常用请求头的列表，比如：

CORS_ALLOW_HEADERS = [
    'pragma',
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

或者更简洁的方式，基于默认允许的头扩展：

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = default_headers + (
    'pragma',
)

2. 清理冗余CORS配置

你同时设置了CORS_ORIGIN_ALLOW_ALL = True和CORS_ALLOWED_ORIGINS、CORS_ORIGIN_WHITELIST，这会导致后两者被忽略（当CORS_ORIGIN_ALLOW_ALL为True时，所有来源都被允许）。如果仅需允许特定前端地址，建议将CORS_ORIGIN_ALLOW_ALL设为False，保留CORS_ALLOWED_ORIGINS即可，避免配置冲突。

3. 确认中间件顺序

你的中间件中corsheaders.middleware.CorsMiddleware已放在django.middleware.common.CommonMiddleware之前，这是正确配置，无需修改。

修正后的示例配置 #

ALLOWED_HOSTS = ['192.168.1.195','127.0.0.1','localhost']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'host_manager.apps.HostManagerConfig',
    'corsheaders',
]

# 仅允许指定前端地址，关闭全局允许
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOWED_ORIGINS = [
    "http://192.168.1.195:4200",
    "http://127.0.0.1:4200",
    "http://localhost:4200",
]

# 允许包含pragma的请求头
from corsheaders.defaults import default_headers
CORS_ALLOW_HEADERS = default_headers + (
    'pragma',
)

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

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