React调用Node.js JWT接口报JsonWebTokenError: jwt malformed问题

问题根源分析 #

1. Axios实例未正确使用：你在onSubmit函数里调用的是原始axios.post，但你配置了带拦截器的自定义instance，如果没使用这个实例，拦截器不会生效，Authorization请求头无法被正确设置。
2. Authorization头格式错误/空值处理缺失：JWT标准的Authorization头格式应为Bearer <token>，你的拦截器直接将localStorage中的token赋值给Authorization，未添加Bearer 前缀；同时当localStorage中没有token时，Authorization会被设为null，后端处理后得到空字符串，传入jwt.verify就会触发"jwt malformed"错误。
3. 后端空token验证逻辑漏洞：当前后端代码中，即使token为空字符串，仍会尝试调用jwt.verify，这必然导致格式错误。

解决方案 #

1. 使用自定义Axios实例 #

确保在请求时使用你配置的带拦截器的Axios实例，而非原始axios：

// 先导入你的自定义Axios实例
import instance from './path/to/your/axios-instance-file';

const onSubmit = async () => {
    try {
      setIsLoading(true);
      const fields = {title,tags,text,imageUrl};
      // 使用instance.post替代axios.post
      const { data } = await instance.post("/posts", fields);
      const id = data._id;
      navigate(`/posts/${id}`);
    } catch (error) {
      console.warn(error);
      alert("Error while creating post");
    }
  };

2. 修正Authorization头格式并处理空token #

在Axios拦截器中按照标准格式设置Authorization头，且仅当token存在时才设置：

import axios from "axios";
const instance = axios.create({
  baseURL: "http://localhost:4444",
});
instance.interceptors.request.use((config) => {
  const token = window.localStorage.getItem("token");
  if (token) {
    // 添加Bearer前缀，符合JWT标准格式
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
export default instance;

3. 优化后端checkAuth中间件 #

在验证前先检查token是否为空，避免空字符串传入jwt.verify：

import jwt from "jsonwebtoken";
export default (req, res, next) => {
  const token = (req.headers.authorization || "").replace(/Bearer\s?/, "");
  
  // 先判断token是否为空，直接返回禁止访问
  if (!token) {
    return res.status(403).json({ message: "forbidden request" });
  }
  
  try {
    const decoded = jwt.verify(token, "secret123");
    req.userId = decoded._id;
    next();
  } catch (error) {
    console.log(error);
    return res.status(403).json({ message: "forbidden request" });
  }
};

为什么Postman可以正常调用？ #

因为你在Postman中手动设置了符合标准格式的Authorization头（Bearer <有效token>），确保了后端能正确解析验证；而React项目中要么未使用正确的Axios实例，要么请求头格式错误或携带了空token，导致验证失败。

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