电商项目前端CRUD操作报JsonWebTokenError问题求助

前端请求令牌携带检查 #

• 确认创建/更新/删除分类的请求是否在请求头中添加了Authorization字段，格式必须是Bearer <JWT令牌>。POSTMAN能正常请求是因为手动配置了该头，前端大概率是遗漏了这一步。
• 核对前端存储JWT的位置（如localStorage、sessionStorage），确保请求时读取的键名正确，令牌没有过期或被清空。
• 参考正确的axios请求示例：

// 创建分类请求
const createCategory = async (categoryData) => {
  const token = localStorage.getItem('adminToken');
  try {
    const res = await axios.post('/api/admin/categories', categoryData, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    return res.data;
  } catch (err) {
    console.error(err);
  }
};

后端验证中间件逻辑核对 #

• 检查JWT验证中间件是否正确从请求头提取令牌，避免字段名错误（比如写成auth-token而非Authorization），正确的提取逻辑示例：

const authMiddleware = (req, res, next) => {
  // 拆分Bearer前缀与令牌内容
  const authHeader = req.header('Authorization');
  const token = authHeader ? authHeader.split(' ')[1] : null;

  if (!token) {
    return res.status(401).json({ error: 'JsonWebTokenError: jwt must be provided' });
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded.user;
    next();
  } catch (err) {
    res.status(401).json({ error: 'Token is not valid' });
  }
};

• 确认该中间件已正确挂载到分类的创建/更新/删除路由上（虽然POSTMAN正常，但二次核对路由配置避免遗漏）。

跨域请求配置检查 #

• 若前后端跨域部署，前端请求需开启withCredentials（若令牌存在Cookie中），同时确保自定义头能被后端接收：

// axios全局配置
axios.defaults.withCredentials = true;
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('adminToken')}`;

• 后端CORS配置需允许凭证和自定义头：

const corsOptions = {
  origin: 'https://你的前端域名.com',
  credentials: true,
  allowedHeaders: ['Authorization', 'Content-Type']
};
app.use(cors(corsOptions));

令牌有效期与刷新机制 #

• 排查前端存储的JWT是否已过期，可在前端添加请求拦截器，统一处理令牌过期情况：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401 && error.response.data.error.includes('jwt must be provided')) {
      localStorage.removeItem('adminToken');
      window.location.href = '/admin/login';
    }
    return Promise.reject(error);
  }
);

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