如何利用变量记录后端服务器返回的特定 Header（如 X-Server-IP）-Nginx-PHP中文网

可通过Fetch或Axios在响应头中读取X-Server-IP，但需后端配置Access-Control-Expose-Headers并确保CORS模式；Fetch用response.headers.get()，Axios推荐response.headers['x-server-ip']或get()方法，多请求建议用拦截器统一提取。

如何利用变量记录后端服务器返回的特定 header（如 x-server-ip）

可以通过在 HTTP 客户端（如 Axios、Fetch 或原生 XMLHttpRequest）的响应处理逻辑中，显式读取响应头并赋值给 JavaScript 变量来实现。

使用 Fetch API 获取 X-Server-IP

Fetch 默认不暴露自定义响应头，需后端在 Access-Control-Expose-Headers 中明确声明 X-Server-IP，否则 JS 无法读取。

确保后端响应包含： Access-Control-Expose-Headers: X-Server-IP
前端调用时用 response.headers.get('X-Server-IP') 提取值

示例代码：

fetch('/api/data')
  .then(response => {
    const serverIP = response.headers.get('X-Server-IP');
    console.log('后端服务器 IP：', serverIP); // 如 '10.20.30.40'
    return response.json();
  });

使用 Axios 获取并保存到变量

Axios 支持直接访问响应头，但需注意：默认响应对象的 headers 是小写键名（如 x-server-ip），不区分大小写。

beatoven.ai

beatoven.ai是一款AI音频处理工具，免版税AI音乐创建平台。

下载

推荐用 response.headers['x-server-ip'] 或 response.headers.get('X-Server-IP')（v1.5+）
可将值存入全局变量、React State、Vuex/Pinia，或封装为工具函数

示例：

axios.get('/api/status')
  .then(response => {
    const ip = response.headers['x-server-ip'] || response.headers.get('X-Server-IP');
    const serverInfo = { ip, timestamp: Date.now() };
    console.log(serverInfo);
  });

处理多个请求时统一提取 Header

若多个接口都返回 X-Server-IP，建议通过 Axios 拦截器或自定义 Hook 统一收集，避免重复写提取逻辑。

Axios 响应拦截器示例：

axios.interceptors.response.use(response => {
  const ip = response.headers['x-server-ip'];
  if (ip && !window._lastServerIP) {
    window._lastServerIP = ip;
  }
  return response;
});