Vue.js+Node.js+JWT鉴权问题：前端获token后请求无授权头致401

核心原因 #

你遇到的问题本质是前端请求角色列表接口时，没有将登录获取到的JWT token放入请求头的Authorization字段中，和CORS配置无关——CORS是解决跨域请求的权限问题，而401是后端鉴权中间件没识别到有效token导致的。

具体解决步骤 #

1. 存储登录返回的token #

登录成功后，把后端返回的token存在前端（用localStorage或者Vuex/Pinia都可以）：

// 登录请求成功后的处理逻辑
axios.post('/api/login', loginFormData)
  .then(res => {
    const { token } = res.data;
    // 存到localStorage，页面刷新也不会丢
    localStorage.setItem('userToken', token);
    // 如果用状态管理，同步到store里
    // store.commit('saveToken', token);
  })

2. 给axios全局配置请求拦截器 #

在项目的axios封装文件（比如src/utils/request.js）里，加个请求拦截器，自动给需要鉴权的接口带上Authorization头：

import axios from 'axios';

const request = axios.create({
  baseURL: '你的后端接口域名'
});

// 请求拦截器：发送请求前自动加token
request.interceptors.request.use(
  config => {
    const token = localStorage.getItem('userToken');
    if (token) {
      // 注意格式必须是「Bearer + 空格 + token」
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

export default request;

之后所有接口请求都用这个封装好的request实例，别直接用原生axios。

3. 校验后端鉴权中间件逻辑 #

确保你的后端中间件正确解析Authorization头：

• 先检查请求头是否存在Authorization，且格式是Bearer <token>
• 正确提取token部分，再用jsonwebtoken验证有效性

比如Node.js中间件示例：

const jwt = require('jsonwebtoken');

const authMiddleware = (req, res, next) => {
  const authHeader = req.headers.authorization;
  // 校验头的存在性和格式
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ msg: '未授权' });
  }
  // 拆分出token
  const token = authHeader.split(' ')[1];
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded; // 把解析后的用户信息挂到req上，后续接口可用
    next();
  } catch (err) {
    return res.status(401).json({ msg: 'token无效或已过期' });
  }
};

module.exports = authMiddleware;

4. 确认CORS配置允许自定义头 #

虽然这次问题和CORS无关，但确保你的CORS配置允许携带Authorization头：

const cors = require('cors');
app.use(cors({
  origin: '你的前端地址', // 比如http://localhost:8080
  allowedHeaders: ['Content-Type', 'Authorization'], // 明确允许Authorization头
  credentials: true
}));

测试验证 #

1. 登录成功后，打开浏览器控制台的Application标签，确认localStorage里有存储的token
2. 请求角色列表接口时，查看Network标签的请求头，确认Authorization: Bearer <token>已存在
3. 如果还是401，去后端看日志，检查是否正确接收到token，以及token验证是否通过

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