React+Axios调用DRF Social Oauth2出现401未授权错误（Postman正常）

问题描述 #

在React前端通过Axios调用DRF Social Oauth2接口获取用户数据时，接口返回401（Unauthorized）错误，但使用完全相同的请求参数、认证信息在Postman中发起请求，却能正常返回用户数据。

相关代码文件 #

login.js（Axios实例配置） #

// 请粘贴你的Axios实例配置代码

LoginScreen.js（请求处理函数） #

// 请粘贴提交请求的处理函数代码

截图 #

控制台401错误截图 #

Postman正常请求截图 #

可能的原因及解决办法 #

• 跨域请求未携带Cookie：DRF Social Oauth2的认证流程可能依赖Session Cookie或认证Cookie，Axios默认不会在跨域请求中携带Cookie。需在Axios实例中开启withCredentials：

  const api = axios.create({
    baseURL: '你的后端API地址',
    withCredentials: true, // 开启跨域携带Cookie
    // 其他配置项
  });
  

  同时确保DRF后端配置了允许跨域携带Cookie：

  # settings.py
  CORS_ALLOW_CREDENTIALS = True
  CORS_ALLOWED_ORIGINS = ["http://localhost:3000"] # 替换为你的React前端地址
  

• Authorization头格式错误：检查Axios请求中设置的Authorization头格式是否正确，Bearer与token之间必须有空格：

  api.get('/api/user/', {
    headers: {
      'Authorization': `Bearer ${yourAccessToken}` // 注意Bearer后有空格
    }
  });
  

• CSRF令牌缺失：DRF默认启用CSRF保护，跨域请求时需携带CSRF令牌。在Axios中配置自动获取并携带：

  api.defaults.xsrfCookieName = 'csrftoken';
  api.defaults.xsrfHeaderName = 'X-CSRFToken';
  

• Token无效/过期：对比前端存储的Token与Postman中使用的Token是否一致，排查Token获取流程是否存在问题（比如获取到的是旧Token，或Token解析错误）。

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