React+Express项目使用Axios调用第三方API报304错误如何解决

你在user.controller.js中给第三方API发请求时，headers参数传的是字符串，而非Axios要求的对象格式，这是请求失败的直接原因：

// 错误写法：直接传入Authorization字符串值
return axios.get(api_url + "/api/users/me", {
  headers: req.headers["authorization"]
})

正确写法应该把Authorization头放到对象里：

// 正确写法
return axios.get(api_url + "/api/users/me", {
  headers: {
    Authorization: req.headers["authorization"]
  }
})

你看到的304不是第三方API返回的，是浏览器和你的Express后端之间的缓存协商状态：因为你两次请求失败后返回的内容都是固定的"error"，内容完全一致，浏览器触发了协商缓存直接返回了本地缓存结果，和第三方API的请求无关，不用在这个点上浪费排查时间。

1. 更稳妥的请求头获取方式 #

HTTP头本身是大小写不敏感的，Express提供的req.get()方法会自动匹配大小写，比直接读取req.headers更规范，避免因为大小写不一致导致的取值失败：

const token = req.get('Authorization');
if (!token) {
  return res.status(401).send({message: '缺少身份凭证'});
}

2. 补全CORS配置 #

你在app.js中自定义的Access-Control-Allow-Headers没有包含Authorization，部分浏览器可能会拦截跨域请求的Authorization头，建议补上：

app.use(function(req, res, next) {
  res.header(
    "Access-Control-Allow-Headers",
    "Authorization, x-access-token, Origin, Content-Type, Accept"
  );
  next();
});

3. 完善错误日志排查问题 #

你现在的catch块只打印请求失败，没有输出具体错误原因，建议补充错误日志，方便定位第三方API的返回信息：

.catch((err) => {
  console.log("请求第三方API失败:", err.response?.data || err.message);
  res.status(500).send("error");
});

4. 避免开发环境缓存干扰 #

调试阶段可以给接口添加禁用缓存的响应头，避免304缓存影响调试：

// 在roles接口处理逻辑中添加
res.set('Cache-Control', 'no-store');

5. 校验前端token存储逻辑 #

确认你登录成功后存入localStorage的user是纯token字符串，如果你存的是包含token属性的用户信息对象，需要调整auth-header.js的取值逻辑：

// 如果你存的是{token: "xxx", username: "xxx"}格式的对象，修改为
return {
  "Authorization": "Bearer " + user.token 
};

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