React.js中Axios请求头携带JWT令牌后端无法获取问题

核心问题原因 #

你遇到的「Postman请求正常、浏览器Axios请求拿不到头」的问题，本质是两类错误叠加导致的：

1. 前端Axios配置嵌套错误：你定义的apiHeaders本身已经是包裹了headers键的对象，传入Axios请求配置时又把它赋值给了headers字段，相当于实际请求配置变成了headers: { headers: { token: xxx } }，Axios根本不会把你定义的token挂到真实请求头上。
2. 跨域CORS配置错误：
   • Access-Control-Allow-Origin是后端返回的CORS响应头，前端手动在请求头里加这个字段完全无效，反而会触发异常。
   • 你开启了withCredentials: true，同时使用了非标准自定义请求头token，浏览器会先发送OPTIONS预检请求，后端如果没有正确配置CORS允许规则，浏览器会直接拦截自定义请求头，不会发给后端——Postman不受浏览器CORS安全规则限制，所以可以正常请求。
   • 开启withCredentials的场景下，后端CORS配置绝对不能把Access-Control-Allow-Origin设为*，否则浏览器会直接拦截响应。

修复步骤 #

1. 修正前端Axios代码 #

去掉错误的嵌套配置、无效的请求头，修正后代码如下：

const token = window.localStorage.getItem("token");
const result = await Axios.get(
  `${process.env.REACT_APP_BASE_URL}/api/student/AllProjects`,
  {
    withCredentials: true,
    headers: {
      // 移除前端无效的Access-Control-Allow-Origin头
      "Content-Type": "application/json", // 原Content-Type配置冗余，JSON接口直接写对应值即可
      "token": token // 头名和Postman保持完全一致，不需要多余模板字符串包裹
    }
  }
);

验证方式：打开浏览器开发者工具-网络面板，找到对应请求，查看「请求头」部分是否能看到token字段，确认前端确实把头发出去了。

2. 修正后端CORS配置 #

后端需要满足以下配置要求，才能让浏览器正常携带自定义头：

• Access-Control-Allow-Origin响应头不能设为*，必须配置为你前端项目的实际运行源（比如本地开发是http://localhost:3000就填这个值）
• 必须添加Access-Control-Allow-Credentials: true响应头
• 必须在Access-Control-Allow-Headers响应头里加入你自定义的token头，示例值：Content-Type, token
• 后端接口需要放行OPTIONS预检请求，不要对OPTIONS方法做鉴权拦截，保证OPTIONS请求返回2xx状态码

额外排查点 #

如果以上配置改完还是有问题，检查：

• 确认你存储在localStorage里的token值不为空、没有多余的引号或空格
• 确认后端取请求头的字段名和你传的完全一致，部分后端框架取头时对大小写敏感，和Postman里的头名写法保持完全一致即可
• 如果后端是标准JWT鉴权逻辑，通常会从Authorization头取Bearer <token>格式的值，如果你后端是这个逻辑，把头改成Authorization: Bearer ${token}``即可

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