React通过axios向Node/Express后端发送jwtToken报403错误如何解决

你遇到的403错误核心原因是前后端传递Token的请求头规则不匹配：

• 前端axios配置里，将Token放在了名为Authorization的请求头中，值还带了Bearer 前缀
• 服务端authorization.js鉴权逻辑中，仅读取名为token的请求头，完全没有处理Authorization头，所以读取到的Token为空，直接返回403鉴权失败。

两种修复方案任选其一即可： #

方案1：修改服务端鉴权逻辑（更推荐，符合JWT通用规范，也兼容你之前Postman的测试逻辑） #

修改authorization.js中的Token读取代码：

// Get token from header
// 优先读取token头兼容Postman测试，没有的话读取Authorization头适配前端传参
const token = req.header("token") || req.header("Authorization")?.split(" ")[1];

方案2：修改前端请求逻辑匹配服务端现有规则 #

修改前端hotel.js的请求头配置，删掉Bearer 前缀，把请求头名改成服务端要的token：

import axios from "axios";

export const createhotel = async (token, data) => {
  await axios.post(`${process.env.REACT_APP_API}/hotel`, data, {
    headers: {
      token: token,
    },
  });
};

修改后可以查看服务端控制台打印的req.header("token")输出，能正常拿到Token值就说明配置生效。

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