Axios(React)+Express：Authorization头传JWT时出现401未授权错误

核心问题1：使用了错误的认证中间件 #

你的受保护端点 /api/dishes 配置的是 verifyToken 中间件，但该中间件是从Cookie中读取token：

const token = req.cookies.token;

而你的前端是通过Authorization 请求头发送token的，二者完全不匹配。你需要使用专门处理Authorization头的 authenticateToken 中间件。

修复方法：
修改受保护端点的中间件配置：

// 将 verifyToken 替换为 authenticateToken
app.get("/api/dishes", authenticateToken , (req, res) => {
  res.json({ message: "Here are the dishes!", user: req.user });
});

核心问题2：JWT密钥不一致 #

后端生成token时用的是硬编码的 JWT_SECRET = "supersecretkey"，但两个验证中间件里用的是 process.env.JWT_SECRET——如果没有配置 .env 文件，这个值为 undefined，直接导致token验证失败返回401。

修复方法：

方案1（推荐，生产环境适用）：

1. 安装 dotenv 包：

npm install dotenv

2. 在项目根目录创建 .env 文件，添加：

JWT_SECRET=supersecretkey

3. 在后端入口文件顶部引入dotenv并读取环境变量：

require('dotenv').config();
const JWT_SECRET = process.env.JWT_SECRET;

方案2（快速测试用）：

直接将中间件里的 process.env.JWT_SECRET 替换为硬编码的 JWT_SECRET 变量（注意生产环境禁止使用此方式）：

// verifyToken 中间件修改
const decoded = jwt.verify(token, JWT_SECRET);

// authenticateToken 中间件修改
jwt.verify(token, JWT_SECRET, (err, user) => { ... })

额外检查项 #

1. CORS配置：跨域请求时，浏览器默认限制自定义请求头，需后端配置CORS允许Authorization头：
   安装 cors 包：

   npm install cors
   

   后端添加配置：

   const cors = require('cors');
   app.use(cors({
     origin: "http://localhost:3000", // 你的前端运行地址
     allowedHeaders: ['Authorization', 'Content-Type']
   }));
   

2. 前端token存储验证：在浏览器控制台执行 localStorage.getItem('token')，确认登录后token已正确存入localStorage。

3. 请求头格式验证：确保前端发送的Authorization头严格遵循 Bearer <token> 格式，无多余空格或拼写错误。

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