Django与Angular文件上传场景出现401 Unauthorized错误该如何排查？

• 拦截器未正确注册
  Angular的HTTP拦截器不会自动生效，需要在app.module.ts的providers数组中显式配置后才会对所有HttpClient发起的请求生效，未注册的情况下拦截器不会给上传请求加Authorization头，直接触发401。注册参考代码：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptorService } from './你的拦截器路径/auth-interceptor.service';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• isLoggedIn()判断逻辑异常
  如果authService.isLoggedIn()方法的判断逻辑有误，比如未正确读取localStorage中的登录状态，会导致即使本地存在有效token，拦截器也判定为未登录，不会添加认证头。可以在拦截器中打印该方法的返回值做校验。

• Django后端认证配置不匹配

  1. 确认Django REST Framework已开启TokenAuthentication认证类，全局配置参考：

  # settings.py
  REST_FRAMEWORK = {
      'DEFAULT_AUTHENTICATION_CLASSES': [
          'rest_framework.authentication.TokenAuthentication',
      ]
  }
  

  2. 如果你使用的是JWT认证而非DRF原生Token认证，需要将拦截器中Authorization头的前缀从Token改为Bearer，和后端要求的认证格式保持一致。

• 跨域OPTIONS预检请求被拦截
  浏览器发送带自定义认证头的跨域请求前，会先发送OPTIONS类型的预检请求，若Django后端未放行OPTIONS请求的认证校验，预检请求会直接返回401。可以通过Django CORS插件配置CORS_ALLOW_ALL_ORIGINS = True（开发环境用）和CORS_ALLOW_HEADERS = ["*"]，同时配置中间件跳过OPTIONS请求的认证逻辑。

• 上传服务兜底逻辑缺失
  你当前的上传服务中虽然取出了localStorage中的token，但没有手动加到请求头中，拦截器失效时就会导致请求无token。可以修改上传服务代码手动加头做兜底：

public upload(formData) {
    const token = localStorage.getItem('token');
    return this.http.post<any>(`${this.DJANGO_SERVER}/upload/`, formData, {
      headers: {
        Authorization: `Token ${token}`
      }
    }).pipe(map((res) => {
      console.log(res)
    }))
}

• 前端代码语法错误
  你粘贴的fileupload.component.ts代码存在语法错误，subscribe回调的括号不匹配，建议先修正语法问题避免逻辑异常。

内容的提问来源于stack exchange，提问作者alucor-it