HttpClient无法添加Authorization头，Django Rest API认证失败

嘿，我之前升级Ionic到3.x切换到HttpClient的时候也碰到过一模一样的问题！DRF返回的{"detail":"Authentication credentials were not provided."}这个提示真的让人头大，不过排查下来其实就是几个容易忽略的点，我给你梳理下：

1. 确认请求头的格式和设置是否正确 #

HttpClient和旧的Http模块在请求头处理上有个关键区别：HttpHeaders是不可变对象，而且DRF的Token认证要求头格式是固定的。

• 首先，DRF的Token认证需要在请求头里带上Authorization: Token your-token-string，而不是自定义的Token头（除非你自己修改了后端认证逻辑）。
• 正确的HttpClient请求头设置方式：

  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  // 在你的服务类中
  getProtectedData() {
    const authToken = '你的Token值';
    // 正确创建Headers，注意不可变特性
    let headers = new HttpHeaders();
    headers = headers.set('Authorization', `Token ${authToken}`);
    headers = headers.set('Content-Type', 'application/json');
  
    return this.http.get('你的API地址', { headers });
  }
  

  如果你直接链式调用set却不赋值，头是不会生效的，因为每次set都会返回一个新的HttpHeaders对象。

2. 检查后端CORS配置是否允许认证头 #

即使之前旧模块能用，HttpClient发送的OPTIONS预检请求可能会包含新的头字段，需要确保后端CORS配置允许Authorization头：

在Django的settings.py中更新CORS配置：

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',  # 必须添加这个，允许Authorization头跨域
    'content-type',
    'origin',
    'user-agent',
]

# 如果你的请求需要携带凭证（比如Cookie），还要确保这个值为True
CORS_ALLOW_CREDENTIALS = True

3. 排查是否有HTTP拦截器干扰 #

如果你的项目中使用了HTTP拦截器来统一添加认证头，要确保拦截器是克隆请求并添加头，而不是直接修改原请求：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler) {
    const authToken = '获取你的Token';
    // 克隆请求并添加认证头，不要直接修改原请求
    const authRequest = request.clone({
      headers: request.headers.set('Authorization', `Token ${authToken}`)
    });
    return next.handle(authRequest);
  }
}

如果拦截器逻辑错误，可能会覆盖或丢失你的认证头。

4. 用调试工具确认请求是否正确发送 #

打开浏览器开发者工具的Network标签，找到你的API请求，查看Request Headers里是否存在Authorization: Token xxx：

• 如果没有这个头：说明前端设置有问题，回到步骤1检查代码
• 如果有这个头：说明后端问题，检查DRF的认证配置是否启用了TokenAuthentication：

  # settings.py
  REST_FRAMEWORK = {
      'DEFAULT_AUTHENTICATION_CLASSES': [
          'rest_framework.authentication.TokenAuthentication',
          # 其他需要的认证类...
      ],
  }
  

按照这几个步骤排查，应该就能解决问题了！

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