Angular 5 Http Interceptor无法检测POST请求的响应头

我来帮你排查这个头疼的问题，结合你提到已经配置了Access-Control-Expose-Headers但还是失效的情况，咱们一步步拆解可能的原因：

• 先揪出最容易犯的拼写错误
  很多人会把Access-Control-Expose-Headers写成单数的Header，这是高频坑！你得先确认服务端返回的响应头里，这个字段的拼写完全正确，并且它的值明确包含了你要获取的自定义头名称。比如你的自定义头是X-Request-ID，服务端就得返回：

  Access-Control-Expose-Headers: X-Request-ID
  

  多个自定义头的话用逗号分隔就行。

• 检查前端获取响应头的方式是否正确
  Angular的HttpHeaders是惰性加载的，直接打印response.headers根本看不到实际的头内容，得用它提供的方法来读取：

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          // 先列出所有能访问的头，确认自定义头在不在里面
          console.log('可访问的响应头:', event.headers.keys());
          // 精准获取自定义头
          const customHeader = event.headers.get('X-Request-ID');
          console.log('自定义头的值:', customHeader);
        }
      })
    );
  }
  

  你之前打印的HttpResponse里normalizedNames是Map(0) {}，就是因为没通过正确方法访问，惰性加载的内容没被触发渲染。

• 用浏览器Network面板实锤验证
  打开开发者工具的Network标签，找到对应的请求，查看Response Headers：

  • 确认自定义头确实出现在响应列表里；
  • 确认Access-Control-Expose-Headers字段已经包含这个自定义头。
    如果这里都没问题，那问题肯定在前端获取逻辑上；如果这里都没看到目标字段，那就是服务端配置没生效，得回去检查后端框架的跨域配置（比如Spring Boot要注意@CrossOrigin注解的exposedHeaders属性，或者Nginx的配置是否正确）。

• 排查代理或中间件的干扰
  如果你的前端用了代理（比如Angular的proxy.conf.json），要确认代理配置里有没有正确转发响应头。比如必须加上changeOrigin: true，并且确保自定义头和Access-Control-Expose-Headers都没被代理拦截。

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