React TypeScript+Django应用登录认证401错误求助

后端Django侧排查 #

1. 认证配置检查 #

• 确认settings.py中启用了核心认证中间件：

  # settings.py
  MIDDLEWARE = [
      # 其他中间件...
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
  ]
  

• 验证认证后端配置，确保使用默认或正确的认证逻辑：

  # settings.py
  AUTHENTICATION_BACKENDS = [
      'django.contrib.auth.backends.ModelBackend',
  ]
  

2. 登录视图正确性验证 #

如果是自定义登录视图，需确保正确处理POST请求并验证用户凭据：

# views.py
from django.contrib.auth import authenticate, login
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json

@csrf_exempt
def login_view(request):
    if request.method != 'POST':
        return JsonResponse({'msg': '仅支持POST请求'}, status=405)
    
    try:
        data = json.loads(request.body)
        user = authenticate(request, username=data.get('username'), password=data.get('password'))
        if user:
            login(request, user)
            return JsonResponse({'msg': '登录成功'})
        return JsonResponse({'msg': '用户名或密码错误'}, status=401)
    except Exception as e:
        return JsonResponse({'msg': f'请求解析失败: {str(e)}'}, status=400)

注：前后端分离场景下，若未配置CSRF令牌传递，临时用@csrf_exempt测试，生产环境需配置CSRF令牌。

3. CORS配置检查 #

安装并配置django-cors-headers允许前端跨域请求：

# settings.py
INSTALLED_APPS = [
    # 其他应用...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 其他中间件...
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000', # React默认端口，根据实际调整
]
CORS_ALLOW_CREDENTIALS = True # 若使用session认证，需开启此项

前端React TypeScript侧排查 #

1. 请求参数与格式检查 #

确保请求字段名与后端一致，且Content-Type匹配：

// 示例：JSON格式请求
const handleLogin = async (username: string, password: string) => {
    try {
        const res = await fetch('http://localhost:8000/login/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ username, password }), // 字段名需和后端对应
            credentials: 'include', // 若后端用session认证，需携带cookie
        });
        if (!res.ok) throw new Error(await res.text());
        const data = await res.json();
        console.log(data);
    } catch (err) {
        console.error('登录失败:', err);
    }
};

若后端接收表单数据（application/x-www-form-urlencoded），需改用FormData传递参数。

2. JWT认证适配（若使用） #

如果后端用djangorestframework-simplejwt，需调整请求地址和逻辑：

// 获取JWT令牌
const getJwtToken = async (username: string, password: string) => {
    const res = await fetch('http://localhost:8000/api/token/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password }),
    });
    const data = await res.json();
    localStorage.setItem('access_token', data.access);
};

快速排查步骤 #

1. 用Postman直接调用POST http://localhost:8000/login/，传入正确的用户名密码，判断是前端还是后端问题。
2. 检查Django后台是否存在该用户，尝试重置密码后再测试。
3. 开启Django DEBUG模式，查看控制台日志获取具体错误信息。

内容的提问来源于stack exchange，提问作者Erlend Lien Grøtberg