前端axios携带Authorization发请求 后端获取为undefined问题排查

问题排查与解决方案 #

核心错误1：前端axios参数传递错误 #

axios.post的方法参数顺序为 axios.post(请求地址, 请求体数据, 配置项)，你当前将headers配置放在了第二个参数（请求体位置），导致配置没有生效，请求实际没有携带Authorization头。
修正后的前端代码：

export const fetchUser = async (token: any) => {
  // 第二个参数为请求体，无参数可传空对象，第三个参数放headers配置
  const res = await axios.post('/user/getuser', {}, {
    headers: { Authorization: token }
    // 符合规范的写法建议加Bearer前缀：Authorization: `Bearer ${token}`
  });
  return res;
};

核心错误2：后端获取请求头的语法错误 #

express中req.headers是存储所有请求头的对象，不是方法，且express会自动将所有请求头字段转为小写，因此大写的Authorization无法直接匹配到。
修正后的鉴权中间件代码：

const jwt = require('jsonwebtoken');
import {Request, Response, NextFunction} from 'express';

const auth = (req: Request | any, res: Response, next: NextFunction) => {
    try {
        // 从小写字段取authorization值
        const token = req.headers.authorization;
        // 如果前端加了Bearer前缀，用以下写法取实际token：
        // const token = req.headers.authorization?.split(' ')[1];
        console.log(token);
        if(!token) return res.status(400).json({msg: 'Invalid Authentication.'});

        jwt.verify(token, process.env.ACCESS_TOKEN as string, (err: any, user: any) => {
            if(err) return res.status(400).json({msg: "Invalid Authentication token"})
            req.user = user;
            next();
        });
    } catch (error: any) {
        return res.status(500).json({msg: error.message});
    }
}
module.exports = auth;

额外排查项 #

如果修正后仍存在问题，按以下步骤排查：

• 打开浏览器控制台的「网络」面板，找到对应请求，检查Request Headers中是否存在Authorization字段，确认字段值正常
• 如果是跨域请求，需要后端配置CORS规则，允许Authorization头：添加响应头Access-Control-Allow-Headers: Authorization，否则浏览器会自动拦截自定义头不会发送

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