React中使用Axios无法获取全部响应头，如何解决？

这是由于浏览器的CORS安全限制导致的。根据CORS规范，默认情况下只有以下响应头是允许客户端JavaScript访问的：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

其他自定义头（比如你看到的x-access-token、x-refresh-token）或者非默认头（比如Date、ETag），必须由服务器通过Access-Control-Expose-Headers响应头明确声明允许暴露，客户端才能通过axios获取到。

解决步骤 #

1. 服务器端配置Access-Control-Expose-Headers #

需要在API服务器上添加这个响应头，指定需要暴露给客户端的额外头。以下是不同场景的配置示例：

如果你使用Express框架（搭配cors中间件）：

const cors = require('cors');
const express = require('express');
const app = express();

// 配置允许暴露的响应头
app.use(cors({
  exposedHeaders: ['x-access-token', 'x-refresh-token', 'Date', 'ETag']
}));

手动设置响应头（不使用cors中间件）：

在登录接口的响应处理中添加：

res.setHeader(
  'Access-Control-Expose-Headers',
  'x-access-token,x-refresh-token,Date,ETag'
);

2. 客户端验证 #

服务器配置完成后，重新发送axios请求，此时response.headers就能包含所有被允许暴露的头了。修改你的代码测试：

axios
  .post(authUrl+'/user/login', body)
  .then((response) => {
    console.log("完整响应头:", response.headers);
    // 可以直接获取自定义头
    const accessToken = response.headers['x-access-token'];
    const refreshToken = response.headers['x-refresh-token'];
    return response;
  })

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