DRF+Vue项目注册接口Chrome返回401 Unauthorized其他浏览器正常问题求助

你遇到的问题既不是Chrome的特有特性，也不是CORS配置问题，核心原因可以从两个请求头的差异直接定位：

• Chrome的请求头携带了Authorization: Token acf8b9099de5eba413dea141ce2c06b6cfb03159，而Edge的请求头中Authorization字段为空
• 你观察到的WWW-Authenticate: Token是后端返回401时的附带响应头，是请求失败的结果，不是原因

这个现象和Django Rest Framework的鉴权逻辑有关：DRF的TokenAuthentication校验逻辑优先级高于权限类校验，只要请求携带了Authorization头，不管接口是否设置了AllowAny权限，都会先校验Token的有效性，Token无效直接返回401，不会走匿名访问逻辑。
你本地Chrome之前大概率登陆过站点，残留了旧的无效Token存储在本地，而Edge中没有对应Token存储，才出现了两个浏览器表现不一致的情况。

1. 临时验证方案 #

打开Chrome开发者工具 -> Application标签页，找到Local Storage、Session Storage目录，删除里面存储的token字段，重新发起注册请求即可正常返回201。

2. 前端永久修复 #

修改axios全局请求拦截器逻辑，不要无脑给所有请求加Authorization头，针对登陆、注册等不需要鉴权的接口，跳过Token拼接：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  // 配置不需要鉴权的接口白名单
  const noAuthApiList = ['/api/v1/users/auths/']
  // 仅当存在Token、且当前接口不在白名单中时，才携带Authorization头
  if (token && !noAuthApiList.some(api => config.url.includes(api))) {
    config.headers.Authorization = `Token ${token}`
  }
  return config
})

3. 后端兼容优化 #

给不需要鉴权的视图显式设置空的鉴权类，DRF就会跳过Token校验逻辑，即便前端误带了无效Token也不会报错：

from rest_framework import viewsets
from rest_framework.permissions import AllowAny

class UserAuthViewSet(viewsets.ModelViewSet):
    # 显式清空鉴权类，跳过所有Token校验
    authentication_classes = []
    permission_classes = [AllowAny]
    # 其余视图逻辑

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