React+Redux对接Django Djoser JWT登录报Authentication credentials were not provided错误

问题根因及修复方案 #

1. 刷新后localStorage令牌清空的排查方向

• 首先校验令牌存储的key是否一致：检查登录成功逻辑中存入localStorage的key是否和你代码中读取的access完全匹配，常见拼写错误比如存的时候用access_token、Access等，会导致读取时拿不到值，看起来像是被清空
• 排查全局清空逻辑：搜索项目代码中所有localStorage.removeItem('access')、localStorage.clear()调用，确认是否在路由守卫、错误捕获、应用初始化等逻辑中被误触发
• 检查浏览器环境：确认是否使用隐私无痕模式打开页面，无痕模式下的localStorage会在页面关闭/刷新后自动清空
• 确认是否有PWA/缓存配置冲突：如果项目配置了Service Worker等缓存逻辑，可能会导致存储读写异常

2. 登录生成新令牌仍触发报错的核心原因

你给出的代码中90%概率是JWT认证前缀前后端不匹配导致的：
Django Djoser依赖的SimpleJWT默认的认证头前缀是Bearer，而你代码中写的是JWT，后端会直接拒绝识别该请求，返回401错误触发USER_LOADED_FAIL。
其他可能的原因：

• 跨域配置不全：Django后端没有配置允许Authorization头跨域，导致请求头被浏览器拦截
• 端点配置错误：确认后端Djoser的路由前缀是否和你请求的${process.env.REACT_APP_API_URL}/auth/users/me/完全匹配
• 令牌有效期配置过短：如果SimpleJWT配置的ACCESS_TOKEN_LIFETIME小于1分钟，可能会出现刚拿到的令牌请求时已经过期的情况

修复步骤

1. 统一认证前缀，二选一即可：
   • 修改前端请求头：将代码中的'Authorization': JWT ${localStorage.getItem('access')}改为`'Authorization': `Bearer ${localStorage.getItem('access')}
   • 或者修改Django后端settings.py配置：

   SIMPLE_JWT = {
       'AUTH_HEADER_TYPES': ('JWT',),
   }
   

2. 补全Django跨域配置，在settings.py中添加：

   CORS_ALLOW_HEADERS = [
       'accept',
       'authorization',
       'content-type',
       'origin',
   ]
   CORS_ALLOW_CREDENTIALS = True
   

3. 确认登录逻辑：登录请求成功拿到access和refresh令牌后，立即同步存入localStorage，再调用load_user接口拉取用户信息，避免异步时序问题

内容的提问来源于stack exchange，提问作者C-Bizz