可通过Fetch或Axios在响应头中读取X-Server-IP，但需后端配置Access-Control-Expose-Headers并确保CORS模式；Fetch用response.headers.get()，Axios推荐response.headers['x-server-ip']或get()方法，多请求建议用拦截器统一提取。
可以通过在 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），不区分大小写。
- 推荐用
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; }); - 也可结合请求 ID 或 URL 做映射缓存，用于灰度或链路追踪场景
注意事项与常见问题
实际使用中容易忽略服务端配置和浏览器限制，导致取不到值。
- 后端必须设置
Access-Control-Expose-Headers，否则浏览器会屏蔽该 Header - 开发环境若用代理（如 vite / webpack devServer），代理层可能未透传自定义 Header，需检查代理配置
- 某些 CDN 或网关（如 Nginx、Cloudflare）会过滤或重写响应头，需确认其行为
- Fetch 在
no-cors模式下完全无法读取响应头，务必使用cors模式
