Node.js无法从req.headers.authorization提取JWT token问题求助

你遇到的核心问题是前端请求没有主动携带Authorization头，同时存在几处代码逻辑不匹配的问题，按以下步骤修改即可：

1. 前端登录成功后存储token #

你当前的登录逻辑没有接收接口返回的token，也没有做本地存储，修改login函数：

const login = async (e) => {
  e.preventDefault();
  // 接收登录接口返回的响应数据
  const res = await POST(ENDPOINTS.USER_LOGIN, userLogin);
  // 将token存储到localStorage（也可以用sessionStorage）
  localStorage.setItem('jwt_token', res.token);
};

2. 给请求统一添加Authorization头 #

你封装的POST方法目前没有携带认证头，有两种实现方式：

• 方式一：给请求工具加全局拦截器（以axios为例，如果你是自己封装的fetch逻辑同理）

// 请求拦截器，所有请求发出去前自动加头
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('jwt_token');
  if (token) {
    // 注意Bearer后面有空格
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

• 方式二：发需要鉴权的请求时手动传头

// 调用POST时传入headers参数
await POST(ENDPOINTS.PROTECTED_API, data, {
  headers: {
    Authorization: `Bearer ${localStorage.getItem('jwt_token')}`
  }
});

3. 修复后端两处逻辑错误 #

你当前的鉴权中间件存在两个会导致验证失败的问题：

3.1 兼容空Authorization头的情况，同时修正JWT payload字段不匹配的问题 #

module.exports = (req, res, next) => {
  try {
    // 先判断Authorization头是否存在
    const authHeader = req.headers.authorization;
    if (!authHeader || !authHeader.startsWith('Bearer ')) {
      return res.status(401).json({ error: "缺少有效认证头" });
    }
    const token = authHeader.split(" ")[1];
    // 注意：你签发JWT时payload的键是userId，不是user_id
    const decodedToken = jwt.verify(token, process.env.JWT_TOKEN);
    const userId = decodedToken.userId;
    if (req.body.user_id && req.body.user_id !== userId) {
      throw "用户ID无效";
    } else {
      next();
    }
  } catch {
    res.status(401).json({
      error: new Error("用户ID无效"),
    });
  }
};

3.2 统一JWT签名密钥 #

你当前签发JWT时用的是硬编码的"TOOOKEN"，但验证时用的是process.env.JWT_TOKEN，需要保持两者一致，建议都用环境变量：

// 登录接口签发token的部分修改为
token: jwt.sign({ userId: user_id }, process.env.JWT_TOKEN, {
  expiresIn: "24h",
})

4. 配置跨域允许Authorization头 #

你是跨域请求（前端端口3000，后端端口4200），需要在后端配置CORS规则，允许Authorization头透传，以express的cors中间件为例：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000',
  // 允许前端携带Authorization头
  allowedHeaders: ['Content-Type', 'Authorization']
}));

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