Blazor WASM调用Azure Function遇CORS相关JSON解析异常排查

是不是不透明响应导致的？ #

大概率和不透明响应有关，但本质是CORS配置未正确生效——浏览器拦截了跨域请求的响应内容，使得Blazor的HttpClient拿到空响应体，进而触发JSON解析错误。不透明响应是浏览器在跨域请求未通过CORS预检时返回的特殊响应，此时响应体为空，自然无法解析JSON。你提到浏览器直接调用端点正常，说明Function本身能返回有效JSON，问题出在跨域请求的CORS校验环节。

具体解决步骤 #

1. 精确匹配CORS允许源 #

• 打开浏览器开发者工具（F12），切换到Network面板，找到Blazor发起的请求，查看Request Headers中的Origin字段（例如https://your-blazor-app.azurewebsites.net）。
• 复制这个Origin值，精确添加到Azure Function的CORS允许列表中，注意不要额外添加斜杠、端口（HTTPS默认443无需添加）或通配符（除非明确需要）。
• 检查OPTIONS预检请求的响应：查看该请求的Response Headers，确认Access-Control-Allow-Origin与请求的Origin完全一致，且Access-Control-Allow-Methods包含你调用的HTTP方法（GET/POST等）。

2. 检查Blazor的HttpClient调用代码 #

• 确保请求头配置正确，尤其是Accept头需指定application/json：

  // 推荐使用GetFromJsonAsync/PostAsJsonAsync，自动处理头和序列化
  var result = await _httpClient.GetFromJsonAsync<YourResponseModel>("https://your-function-url/api/your-endpoint");
  
  // 手动构建请求时需显式设置头
  var request = new HttpRequestMessage(HttpMethod.Get, "https://your-function-url/api/your-endpoint");
  request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
  var response = await _httpClient.SendAsync(request);
  // 先确保请求成功，再解析
  response.EnsureSuccessStatusCode();
  var result = await response.Content.ReadFromJsonAsync<YourResponseModel>();
  

• 避免添加未在CORS配置中允许的自定义请求头，否则会触发预检失败。

3. 排查响应内容异常 #

在解析JSON前，先读取响应的原始字符串，确认实际返回内容：

var response = await _httpClient.GetAsync("https://your-function-url/api/your-endpoint");
var rawContent = await response.Content.ReadAsStringAsync();
// 输出rawContent到浏览器控制台或日志，查看是否为空、HTML错误页或非JSON内容

如果rawContent是HTML错误页（比如500错误），说明Function部署或运行有问题，需排查Function的日志；如果为空，则回到CORS配置的排查。

4. 确认Azure Function的部署状态 #

• 检查Function的部署是否完成，是否使用了正确的.NET8运行时。
• 查看Function的日志（Azure门户的Function应用→监控→日志），确认Blazor的请求是否到达Function，以及Function是否返回了预期的JSON响应。

关于Static Web Apps的说明 #

Static Web Apps的托管API确实能规避CORS问题（因为API和前端同域），但这种API无法独立对外提供服务。如果你需要独立的Azure Function供其他用户访问，必须保留独立部署的Function，通过正确配置CORS解决跨域问题即可。

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