为何通过HttpClient.GetAsync调用.NET5 Azure Function时自定义Header缺失

根因说明 #

Blazor WASM运行在浏览器沙箱环境中，所有HTTP请求受浏览器CORS规则约束：自定义响应头默认会被CORS策略隐藏，不会暴露给前端代码。而Postman属于桌面客户端，不受CORS规则限制，因此可以正常读取所有返回头。 #

解决步骤 #

• 第一步：配置Azure Function的CORS公开响应头
  分两种部署场景配置：
  1. 本地开发：修改项目根目录local.settings.json，添加CORSExposedHeaders配置，填入需要暴露的所有自定义Header名称，同时配置允许访问的Blazor前端地址，示例如下：

  {
    "IsEncrypted": false,
    "Values": {
      "AzureWebJobsStorage": "UseDevelopmentStorage=true",
      "FUNCTIONS_WORKER_RUNTIME": "dotnet"
    },
    "Host": {
      "CORS": "https://localhost:5001", // 替换为你的Blazor WASM前端访问地址
      "CORSExposedHeaders": "X-Total-Count,X-Custom-Header" // 替换为你实际的自定义Header名称，多个用英文逗号分隔
    }
  }
  

  2. 云端部署：进入Azure门户→对应Function App→CORS设置页，在「公开的标头」输入栏中逐一添加需要暴露的自定义Header，保存后等待1-2分钟配置生效。
• 第二步：确认Azure Function返回Header的写法正确
  自定义Header需要添加到响应的顶层Headers集合，不要放入Content的Headers中，.NET 5进程内Function示例如下：

  [FunctionName("GetQuotes")]
  public static async Task<IActionResult> Run(
      [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "quotes")] HttpRequest req,
      ILogger log)
  {
      // 业务逻辑处理
      var quotes = await GetQuotesFromDb();
      var totalCount = await GetTotalCount();
      
      var result = new OkObjectResult(quotes);
      // 正确添加自定义响应头
      result.Headers.Add("X-Total-Count", totalCount.ToString());
      return result;
  }
  

• 第三步：Blazor WASM端正确读取响应头
  读取Header时名称大小写不敏感，建议和返回侧写法保持一致，示例如下：

  var response = await GetQuotesAsync(pageNo, pageSize, searchText);
  if (response.IsSuccessStatusCode)
  {
      // 读取自定义Header
      if (response.Headers.TryGetValues("X-Total-Count", out var headerValues))
      {
          var totalCount = int.Parse(headerValues.FirstOrDefault() ?? "0");
          // 业务处理
      }
      // 读取返回内容
      var content = await response.Content.ReadFromJsonAsync<List<Quote>>();
  }
  

额外排查点 #

如果请求链路中存在API网关、反向代理、CDN等中间服务，需要同步在这些服务的CORS配置中添加对应自定义Header的暴露规则，避免中间层过滤掉自定义Header。

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