Angular Http Interceptor添加自定义Header引发CORS问题求解决方案

你遇到的问题根源是：使用setHeaders时会直接替换掉原有的全部请求头集合，而非在原有基础上追加，导致Host、Origin等默认请求头丢失，进而引发CORS问题。

正确的做法是基于原请求的HttpHeaders对象，通过其内置方法创建新的头实例，既能保留原有头信息，又能添加自定义头：

解决方案代码 #

let newReq = req.clone({
  withCredentials: true,
  responseType: 'json',
  headers: req.headers.append('Demo', 'foo')
});

补充说明 #

• req.headers是不可变的HttpHeaders对象，append()方法会返回一个包含原有所有头信息、同时新增指定键值对的新实例（若键已存在，会添加多个同名头）。
• 如果需要覆盖已存在的同名请求头，可改用set()方法：

  headers: req.headers.set('Demo', 'foo')
  

这种方式不会修改原请求的头信息，而是生成新的头集合，确保Host、Origin等关键请求头被完整保留，从根本上避免CORS相关问题。

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