VueSession项目中GET请求Authorization Header无效引发401认证错误

看起来你已经搞定了登录拿令牌的环节，curl能正常请求说明后端的JWT认证逻辑完全没问题，问题肯定出在前端请求没有正确把令牌带上。我帮你梳理几个关键的排查和解决步骤：

1. 先确认令牌的存储是否正确 #

登录成功拿到JWT后，要确保你把它存在了VueSession里（或者localStorage，看你需求），比如：

// 登录接口的回调里
async login() {
  try {
    const response = await this.$axios.post('/token/auth/', {
      username: this.username,
      password: this.password
    });
    // 把令牌存入VueSession
    this.$session.set('jwtToken', response.data.token);
  } catch (err) {
    console.error('登录失败:', err);
  }
}

2. 用Axios拦截器统一添加认证头 #

手动给每个请求加头太麻烦还容易错，最好用Axios的请求拦截器，让所有需要认证的请求自动带上Authorization头，和你curl里的格式完全一致：

// 在你的Axios配置文件里（比如src/plugins/axios.js）
import axios from 'axios';
import Vue from 'vue';
import VueSession from 'vue-session';

Vue.use(VueSession);

// 创建Axios实例
const apiClient = axios.create({
  baseURL: 'http://localhost:8000/api/',
  timeout: 10000
});

// 请求拦截器：发送请求前注入令牌
apiClient.interceptors.request.use(
  (config) => {
    const jwtToken = Vue.prototype.$session.get('jwtToken');
    if (jwtToken) {
      // 注意格式！必须是「JWT + 空格 + 令牌」，和你curl里的写法一致
      config.headers.Authorization = `JWT ${jwtToken}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default apiClient;

3. 排查几个容易踩坑的细节 #

• 头格式是否正确：别把JWT写成Bearer或者小写，后端是按你curl里的JWT来解析的，格式不对直接认不出。
• 跨域配置是否允许Authorization头：如果用了django-cors-headers，要在Django的settings里加：

  CORS_ALLOW_HEADERS = [
      'authorization',
      'content-type',
      # 其他你需要的头
  ]
  

  不然浏览器会把Authorization头给拦截掉，导致后端收不到。
• 令牌是否正确传递：可以在浏览器的Network面板里看请求头，有没有Authorization字段，值是不是和你curl里的一样。如果没有，检查拦截器有没有生效，或者令牌有没有从Session里取到。
• 避免手动覆盖headers：如果某个单独的请求手动设置了headers，记得不要覆盖掉Authorization，比如：

  // 错误示例：会覆盖拦截器加的头
  apiClient.get('/data/', { headers: { 'Content-Type': 'application/json' } });
  // 正确示例：合并头
  apiClient.get('/data/', { headers: { ...this.$axios.defaults.headers, 'Content-Type': 'application/json' } });
  

4. 测试调用接口 #

之后用配置好的Axios实例调用接口就可以了：

// 在组件里
import apiClient from '@/plugins/axios';

export default {
  async mounted() {
    try {
      const response = await apiClient.get('/your-protected-endpoint/');
      console.log('拿到数据:', response.data);
    } catch (err) {
      console.error('请求失败:', err.response.data);
    }
  }
}

按照这个流程走，应该就能解决401的问题了，毕竟后端已经通过curl验证过，核心就是前端把令牌正确带到请求头里。

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