使用 axios 拦截器拦截响应时，为何无法获取所有响应头信息？

在使用 axios 拦截器拦截响应时无法获取所有响应头信息，主要原因是浏览器的同源策略限制了跨域请求中部分响应头的访问，具体原因和解决方法如下：

• 跨域请求的默认限制：当请求涉及跨域（如前端域名与后端 API 域名不同）时，浏览器出于安全考虑，会默认阻止前端代码访问某些敏感响应头（如 Authorization、Access-Token、Set-Cookie 等）。此时，即使后端返回了这些响应头，前端通过 response.headers 也只能获取到简单响应头（如 Content-Type、Cache-Control 等），而无法获取其他头信息。

• 关键限制机制：浏览器通过 CORS（跨域资源共享）规范限制响应头访问。若后端未明确声明允许前端访问的响应头，浏览器会隐藏这些头信息。例如，若后端返回了 Access-Token 头，但未配置 Access-Control-Expose-Headers，前端将无法读取该头。

• 解决方法：后端配置 Access-Control-Expose-Headers：

  后端需在响应头中添加 Access-Control-Expose-Headers，并指定允许前端访问的响应头名称（多个头用逗号分隔）。例如：Access-Control-Expose-Headers: Access-Token, Authorization, X-Custom-Header

  配置后效果：设置后，前端在 axios 拦截器中即可通过 response.headers 获取到声明的响应头信息。

• 示例代码（后端配置）：

  Node.js（Express）：app.use((req, res, next) => { res.setHeader('Access-Control-Expose-Headers', 'Access-Token, Authorization'); next();});

  Spring Boot（Java）：@Configurationpublic class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/") .exposedHeaders("Access-Token", "Authorization"); }}

• 前端 axios 拦截器示例：

  配置后，前端可通过拦截器完整获取响应头：axios.interceptors.response.use(response => { console.log(response.headers); // 可获取到 Access-Token 等头信息 return response;}, error => { return Promise.reject(error);});

• 其他注意事项：

  简单请求与预检请求：若请求为复杂请求（如带自定义头或非简单方法），浏览器会先发送 OPTIONS 预检请求。此时，后端需在预检响应中同时配置 Access-Control-Allow-Headers（允许的请求头）和 Access-Control-Expose-Headers（允许的响应头）。

  非跨域请求：若请求为同源，浏览器不会限制响应头访问，此时无需配置 Access-Control-Expose-Headers 即可获取所有头信息。

总结：跨域请求中无法获取所有响应头信息，是浏览器的安全策略导致的。通过后端配置 Access-Control-Expose-Headers 明确声明允许前端访问的响应头，即可解决该问题。