Blazor WebAssembly中HttpClient添加的请求头API无法识别如何解决

问题根因 #

你遇到的头丢失问题是三个错误共同导致的：

• GET请求无请求体，你将自定义Test头添加到了requestMessage.Content.Headers集合，该集合仅作用于请求体相关头，GET请求下Content未初始化，头不会被写入请求。
• Authorization头构造不符合规范：Base64编码的账号密码属于Basic认证方案，你错误将AuthenticationHeaderValue的第一个参数填为Authorization，导致头格式异常可能被过滤。
• Blazor WebAssembly运行在浏览器沙箱中，跨域请求的自定义头、认证头需要目标API配置CORS规则放行，否则浏览器会在预检阶段直接移除未授权的头。

修复步骤 #

1. 修正请求头构造逻辑 #

调整头的添加位置和Authorization头的方案：

var requestMessage = new HttpRequestMessage()
{
    Method = HttpMethod.Get,
    RequestUri = new Uri(urlStream)
};

// 修正为Basic认证方案
requestMessage.Headers.Authorization = new AuthenticationHeaderValue(
    "Basic", 
    Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes("Admin:Password"))
);
// 自定义头添加到请求头集合，而非Content头集合
requestMessage.Headers.TryAddWithoutValidation("Test", "Value");

var response = await httpClient.SendAsync(requestMessage);
var responseStatusCode = response.StatusCode;
var JsonResult = await response.Content.ReadAsStringAsync();
return JsonResult;

2. 配置API端CORS规则（跨域场景下需要） #

你当前使用的是WCF REST API，需要新增如下配置：

• 允许Blazor应用的域名作为允许源
• 允许OPTIONS预检请求方法
• 允许Authorization、Test等自定义请求头
  配置完成后浏览器就不会在跨域请求时移除你的自定义头。

调试验证 #

修改完成后可以打开浏览器F12开发者工具的「网络」面板，查看实际发出的请求是否携带目标头：

• 如果网络面板中能看到头但API收不到，检查API侧的请求头读取逻辑是否有过滤
• 如果网络面板中看不到头，重新检查CORS配置是否生效

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