Ionic Angular调用Django后端遇CORS拦截，请求header字段mode不被允许

核心错误原因 #

你在Angular的HTTP请求里错误地把mode: 'no-cors'放到了请求头（headers）中，mode是请求模式参数，不属于HTTP标准请求头字段，这会触发浏览器的CORS预请求（OPTIONS），而后端的CORS配置没有允许这个自定义的mode头，因此出现报错。

步骤1：修正前端请求代码 #

把请求配置里的headers: { mode: 'no-cors' }移除，正确的请求代码应该是：

test() {
  return this.httpClient.get(endpoint + '/test');
}

如果确实需要设置请求模式（通常不需要，因为后端已经配置了CORS允许跨域），应该将mode作为请求的独立选项，而非headers的一部分：

test() {
  return this.httpClient.get(endpoint + '/test', {
    // 注意：no-cors模式会限制响应内容的读取，仅在特殊场景使用
    withCredentials: true, // 如果需要携带凭证，对应后端的CORS_ALLOW_CREDENTIALS=True
  });
}

步骤2：简化后端代码 #

你已经通过django-cors-headers配置了全局CORS允许，不需要在视图函数里手动设置Access-Control-Allow-Origin响应头，这会造成冗余。修正后的视图代码：

@csrf_exempt
def test(request):
  response = json.dumps({'success': True})
  return HttpResponse(response, content_type='application/json')

步骤3：确认后端CORS配置正确性 #

确保corsheaders.middleware.CorsMiddleware在MIDDLEWARE列表中的位置正确，应该放在django.middleware.common.CommonMiddleware之前，最终的settings配置保持即可：

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',  # 确保CorsMiddleware在它之前
    ...
]

CORS_ALLOW_ALL_ORIGINS = True 
CORS_ALLOW_CREDENTIALS = True

完成以上修改后，重新启动前后端服务，跨域请求即可正常工作。

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