Angular 5 HttpClient HTTP/2协议升级请求头异常问题求助

Angular的HttpClient底层依赖浏览器的XMLHttpRequest（XHR）对象实现，而根据XHR规范，部分控制连接行为的头是不允许开发者手动设置的，其中就包括Upgrade和Connection。浏览器会自动过滤或覆盖这些头，这就是你看到它们被移除/修改的核心原因。

另外要补充：h2c（明文HTTP/2）在主流浏览器里几乎是不被支持的，Chrome、Firefox等都只支持HTTPS环境下的HTTP/2（即h2协议），所以即使你能设置这些头，浏览器也不会走明文升级流程。

根据你的运行环境，分两种情况处理：

1. 浏览器环境（前端应用） #

完全不需要手动添加这些升级头！只要你的服务器已经配置支持HTTP/2（且是HTTPS环境），浏览器会自动完成HTTP/2的协商升级，不需要你在代码里做任何额外操作。

验证步骤：

• 确保服务器开启HTTPS（使用合法SSL证书）
• 在服务器配置中启用HTTP/2（比如Nginx添加http2 on;配置）
• 打开浏览器开发者工具，在Network面板查看请求的Protocol列，显示h2即说明已使用HTTP/2连接。

2. Node.js环境（比如Angular Universal服务端渲染） #

如果是在Node环境下发起请求，你可以绕过HttpClient，直接用Node.js原生的http2模块，或者第三方HTTP客户端（比如axios）来发起请求——因为Node环境没有浏览器的XHR限制。

举个用Node.js http2模块的示例：

import * as http2 from 'http2';
import { AuthorizationService } from './your-auth-service-path';

// 创建HTTP/2客户端连接
const client = http2.connect('http://your-server-base-url');

// 构造请求头
const requestHeaders = {
  ':method': 'POST',
  ':path': '/some_url', // 替换成你的接口路径
  'Authorization': localStorage.getItem(AuthorizationService.authTokenKey),
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Connection': 'Upgrade, HTTP2-Settings',
  'Upgrade': 'h2c',
  'HTTP2-Settings': 'base64EncodedSettings' // 替换成你的实际base64配置
};

// 发起请求
const req = client.request(requestHeaders);

// 处理响应
req.on('response', (headers) => {
  console.log('响应头:', headers);
  let responseData = '';
  req.on('data', (chunk) => {
    responseData += chunk;
  });
  req.on('end', () => {
    console.log('响应内容:', JSON.parse(responseData));
    client.close();
  });
});

// 发送请求体
req.write(JSON.stringify(body)); // body是你的请求数据
req.end();

如果你的服务器只支持h2c（明文HTTP/2），而你又需要在浏览器中访问，这几乎是不可行的——因为主流浏览器都禁用了明文HTTP/2的支持。这种情况下，建议要么给服务器配置HTTPS并启用h2协议，要么搭建一个中间代理层（比如用Nginx），把浏览器的HTTPS请求转换成后端的h2c请求。

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