React应用中使用Axios响应拦截器添加自定义响应头未生效的解决方案咨询

你的代码没生效的核心原因是：axios响应拦截器里修改的是前端内存中封装后的响应对象的headers，而非实际从后端返回的HTTP响应头——HTTP响应头是由后端服务器发送的，前端只能读取，无法通过响应拦截器追加或修改后让它成为实际响应的一部分。

下面分两种场景给你对应的解决方案：

场景1：仅需前端业务逻辑能获取到这个自定义值 #

如果你的需求只是让前端后续的代码（比如接口调用后的处理逻辑）能拿到myheader的值，不需要修改实际的HTTP响应头，那可以直接给axios的响应对象添加自定义属性：

axios.interceptors.response.use(
  (response) => {
    // 方式1：给响应对象新增自定义属性
    response.customHeaders = { myheader: 'myvalue' };
    // 方式2：直接把值附加到响应数据里
    response.data.myheader = 'myvalue';
    return response;
  },
  (error) => {
    // 错误处理逻辑
    return Promise.reject(error);
  }
);

之后在接口调用的地方，你可以通过response.customHeaders.myheader或者response.data.myheader拿到这个值。

场景2：需要浏览器实际接收到这个自定义响应头 #

如果你的需求是让浏览器能真正接收到myheader这个响应头（比如要在浏览器开发者工具的Network面板里看到它），那必须在后端服务做配置：

• 第一步：后端在返回响应时主动添加myheader: myvalue这个响应头
• 第二步：如果涉及跨域请求，后端还需要配置CORS的Access-Control-Expose-Headers，把myheader加入暴露列表，否则浏览器会限制前端读取这个自定义响应头

举个后端Node.js/Express的配置示例：

// 添加自定义响应头
app.get('/your-api', (req, res) => {
  res.setHeader('myheader', 'myvalue');
  // 跨域时配置暴露自定义头
  res.setHeader('Access-Control-Expose-Headers', 'myheader');
  res.send('response data');
});

再回头说你的原代码 #

你原代码里修改config.headers（这里参数命名其实应该是response.headers），只是修改了axios封装的响应对象里的headers字段，这个修改只存在于前端内存中，不会影响实际的HTTP响应——所以你在前端读取response.headers.myheader能看到值，但浏览器的实际响应头里并不会有这个字段，这就是为什么你觉得“没生效”。

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