IE11下Angular HttpClient POST请求丢失请求头的问题求助

我之前做Angular项目时也踩过IE11这个坑，尤其是首次加载时请求头莫名丢失、刷新后又恢复正常的情况，结合你的问题和代码，给你几个针对性的解决方案：

1. 先修复HttpHeaders的使用错误 #

首先要注意：Angular的HttpHeaders是不可变对象，你当前的getHeaders方法里调用append后没有重新赋值，导致最终返回的还是空的HttpHeaders实例！这是核心问题之一。

错误写法的问题： #

private getHeaders(): HttpHeaders {
  const headers = new HttpHeaders();
  headers.append('content-type', 'application/json'); // append返回新实例，但未赋值给headers
  headers.append('x-api-key', environment.key);
  return headers; // 实际返回的是初始空对象
}

正确的两种写法： #

写法一：每次append后重新赋值

private getHeaders(): HttpHeaders {
  let headers = new HttpHeaders();
  headers = headers.append('content-type', 'application/json');
  headers = headers.append('x-api-key', environment.key);
  return headers;
}

写法二：初始化时直接传入头对象（更简洁）

private getHeaders(): HttpHeaders {
  return new HttpHeaders({
    'content-type': 'application/json',
    'x-api-key': environment.key
  });
}

2. 处理IE11的CORS预请求和缓存问题 #

IE11对CORS的处理和现代浏览器差异很大，首次加载时可能OPTIONS预请求没有正确携带自定义头，导致服务器返回403，刷新后缓存了预请求结果才正常。

• 服务器端配置：确保你的API服务器正确处理OPTIONS请求，在响应头中添加Access-Control-Allow-Headers，包含x-api-key、content-type这些自定义头，比如：

  Access-Control-Allow-Headers: Content-Type, x-api-key
  

• 添加防缓存头：可以在请求头里加上Cache-Control: no-cache，避免IE11缓存错误的请求状态：

  private getHeaders(): HttpHeaders {
    return new HttpHeaders({
      'content-type': 'application/json',
      'x-api-key': environment.key,
      'Cache-Control': 'no-cache'
    });
  }
  

3. 确认IE11的Polyfill配置完整 #

Angular在IE11中运行需要额外的polyfill支持，确保你的polyfills.ts文件已经包含必要的配置，比如：

// 必要的IE11 polyfill
import 'core-js/es6/array';
import 'core-js/es6/date';
import 'core-js/es6/function';
import 'core-js/es6/map';
import 'core-js/es6/number';
import 'core-js/es6/object';
import 'core-js/es6/reflect';
import 'core-js/es6/string';
import 'core-js/es7/array';
import 'core-js/es7/object';

// HttpClient相关的polyfill
import 'zone.js/dist/zone';

4. 验证环境变量加载时机 #

虽然刷新后正常，但可以确认下environment.key在首次加载时是否已经正确赋值，比如在getHeaders方法里打印这个值，排除环境变量加载延迟的问题。

按照上面的步骤调整后，应该就能解决IE11首次加载时请求头丢失的问题了，我之前用类似的方法解决过完全一样的场景。

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