Vue使用Axios请求Django SimpleJWT接口提示未提供认证凭据

AI 小北

2026-9-27

问题排查解决步骤

注：Postman请求正常是因为Postman不受浏览器同源策略限制，不会触发CORS预检流程，所以只要请求头正确就能正常识别，浏览器环境下的跨域请求需要额外配置CORS规则。

第一步：前端请求验证
打开浏览器F12开发者工具，切换到「网络」标签页，重新触发请求，查看对应请求的请求头部分，确认Authorization头是否确实被携带发送。如果这里没有这个头，说明是前端Axios配置层面的问题：
1. 确认console.log(accessToken)打印的token非空、格式正确
2. 检查是否有全局Axios拦截器覆盖了请求头配置，导致自定义的Authorization被替换/清除
第二步：修复Django CORS配置
当前CORS配置缺失了允许前端携带Authorization头的规则，跨域复杂请求（带自定义头的请求都会触发OPTIONS预检）会默认拦截非标准头，导致后端收不到Authorization。
在Django的settings.py中添加如下配置：
```
CORS_ALLOW_HEADERS = [
    'content-type',
    'authorization',
]
```
另外你同时配置了CORS_ALLOWED_ORIGINS和CORS_ALLOW_ALL_ORIGINS = True，二者存在冲突，保留CORS_ALLOW_ALL_ORIGINS = True的话可以删除前面的CORS_ALLOWED_ORIGINS配置，生产环境建议关闭ALLOW_ALL，只配置可信的业务域名。
第三步：Axios跨域配置补充
如果配置完CORS后还是带不上头，可以在Axios请求配置中添加withCredentials: true参数：
```
axios.get('http://django:8000/api/uvs/',{
  headers:{
    'Authorization':`Bearer ${accessToken}`,
  },
  withCredentials: true
})
```
第四步：服务端请求日志排查
如果前面步骤都确认正常，可以在Django视图中添加日志打印所有收到的请求头，确认是否有中间件过滤掉了Authorization头：
```
# 在UserViewSet中重写list方法添加日志
def list(self, request, *args, **kwargs):
    print(request.headers) # 打印所有请求头排查是否存在Authorization
    return super().list(request, *args, **kwargs)
```
同时确认SimpleJWT的AUTH_HEADER_TYPES配置和前端传的Bearer前缀完全一致，大小写也需要匹配。