Django REST Framework+React Axios JWT认证401错误求助

我用Django REST Framework做后端、React做前端开发项目，Axios发起HTTP请求，JWT实现身份认证。当前遇到的问题是：登录获取Token后，所有请求均被Django返回401错误，但调整Axios的Header配置后该问题可解决。以下是相关代码，协助排查解决：

DRF settings.py配置 #

REST_FRAMEWORK = {
  'DEFAULT_AUTHENTICATION_CLASSES': (
      'rest_framework_simplejwt.authentication.JWTAuthentication',
 )
}

SIMPLE_JWT = {
'ACCESS_TOKEN_LIFETIME': timedelta(days=1),
'REFRESH_TOKEN_LIFETIME': timedelta(days=2),
'ROTATE_REFRESH_TOKENS': False,
'BLACKLIST_AFTER_ROTATION': False,
'UPDATE_LAST_LOGIN': True,
}

CORS_ALLOWED_ORIGINS = [
"http://localhost:3000"
]

Axios配置代码 #

const axiosClient = axios.create({
baseURL: import.meta.env.VITE_API_URL,
headers: {
"Content-Type": "application/json",
},
});

export default axiosClient;

const jToken = useSelector((state) => state.authSlice.accessToken);
axiosClient.interceptors.request.use(function (config) {
config.headers.Authorization = `Bearer ${jToken}`;
 return config;
});

Axios请求代码 #

const fetchData = async () => {
try {
  const response = await axiosClient.get(AppContext.managementStudentUri);
  //   console.log(response.data);
  setData(response.data);
  setIsLoading(false);
} catch (error) {
  apiErrorHandler(error);
}
};

排查解决方向 #

1. Token空值拦截处理
   检查jToken是否在拦截器初始化时为空（比如组件挂载时Redux中accessToken还未更新），此时会把Bearer null塞进请求头导致401。给拦截器加判断，仅当Token存在时设置Authorization头：

   axiosClient.interceptors.request.use(function (config) {
     if (jToken) {
       config.headers.Authorization = `Bearer ${jToken}`;
     }
     return config;
   });
   

2. 拦截器重复注册问题
   如果拦截器是在函数组件内用useSelector注册的，每次组件渲染都会重新注册拦截器，可能导致Token未及时更新或重复覆盖。建议把拦截器移到单独的Axios配置文件中，单独维护Token：

   // axiosClient.js
   let authToken = null;
   
   export const setAuthToken = (token) => {
     authToken = token;
   };
   
   const axiosClient = axios.create({
     baseURL: import.meta.env.VITE_API_URL,
     headers: {
       "Content-Type": "application/json",
     },
   });
   
   axiosClient.interceptors.request.use(function (config) {
     if (authToken) {
       config.headers.Authorization = `Bearer ${authToken}`;
     }
     return config;
   });
   
   export default axiosClient;
   

   登录成功后调用setAuthToken(accessToken)，确保Token被正确设置。

3. CORS Header权限配置
   DRF默认CORS可能不允许传递Authorization头，在settings.py中添加允许的Header列表：

   CORS_ALLOW_HEADERS = [
       "accept",
       "accept-encoding",
       "authorization",
       "content-type",
       "origin",
   ]
   

   同时确认django-cors-headers已安装并添加到INSTALLED_APPS和中间件中。

4. Token格式验证
   打印jToken的值，确认没有多余空格、引号，格式为完整的JWT字符串（如eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...）。

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