Azure HTTP Trigger（C#）无法向JavaScript返回响应问题排查

我通过HTML/JavaScript调用Azure HTTP Trigger时，能发起请求但收不到响应，始终报错：“There was a problem with the fetch operation:”。用Postman调用该Trigger时，请求和响应都正常。请问是我的JavaScript代码还是HTTP Trigger代码有问题？

C#代码： #

public static class Function1
{
    [FunctionName("Function1")]
    public static async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
        ILogger log)
    {
        log.LogInformation("C# HTTP trigger function processed a request.");

        string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
        dynamic[] data = JsonConvert.DeserializeObject<dynamic[]>(requestBody);

        string area_harvested = data[0].Area_Harvested;
        string farmgateprice = data[0].FarmGatePricePHPPSA;

        log.LogInformation($"area_harvested: {area_harvested}");
        log.LogInformation($"farmgateprice: {farmgateprice}");

        // Create response message
        var response = new HttpResponseMessage(HttpStatusCode.OK);
        var content = new StringContent("Response content");
        content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
        response.Content = content;

        return new HttpResponseMessageResult(response);
    }
}

public class HttpResponseMessageResult : IActionResult
{
    private readonly HttpResponseMessage _response;

    public HttpResponseMessageResult(HttpResponseMessage response)
    {
        _response = response;
    }

    public async Task ExecuteResultAsync(ActionContext context)
    {
        var response = context.HttpContext.Response;

        response.StatusCode = (int)_response.StatusCode;

        foreach (var header in _response.Headers)
        {
            response.Headers[header.Key] = header.Value.ToArray();
        }

        if (_response.Content != null)
        {
            foreach (var header in _response.Content.Headers)
            {
                response.Headers[header.Key] = header.Value.ToArray();
            }

            await _response.Content.CopyToAsync(response.Body);
        }
    }
}

JavaScript代码： #

const requestOptions = {
  method: "POST",
  body: testData,
  header: {"Content-Type": "application/json"}
};

try {
  const response = await fetch(url, requestOptions);

  if (!response.ok) {
    throw new Error('Network response was not ok');
  }

  const responseData = await response.text();
  console.log('Response data:', responseData);
} catch (error) {
  console.error('There was a problem with the fetch operation:', error);
}

1. JavaScript代码的直接错误 #

• headers属性拼写错误：fetch配置中写的是header，正确属性名是**headers（复数）**，这会导致Content-Type头无法被浏览器正确识别，服务器无法解析请求体格式。
• 请求体未序列化：如果testData是JS对象，必须用JSON.stringify(testData)转为JSON字符串后再传入body，否则发送的是对象的toString()结果（格式为[object Object]），服务器完全无法解析。

修复后的JavaScript代码：

// 示例testData格式，根据实际情况调整
const testData = [{ Area_Harvested: "100", FarmGatePricePHPPSA: "50" }];

const requestOptions = {
  method: "POST",
  body: JSON.stringify(testData), // 序列化对象为JSON字符串
  headers: {"Content-Type": "application/json"} // 修正为复数headers
};

try {
  const response = await fetch(url, requestOptions);

  if (!response.ok) {
    throw new Error(`HTTP错误状态：${response.status}`);
  }

  const responseData = await response.text();
  console.log('响应数据:', responseData);
} catch (error) {
  console.error('fetch操作出现问题:', error);
}

2. C#代码的潜在问题与优化 #

• 缺少异常处理：如果请求体格式错误（比如上述JS问题导致的非JSON内容），JsonConvert.DeserializeObject<dynamic[]>(requestBody)会直接抛出异常，导致函数返回500内部错误且无友好提示，建议添加异常捕获逻辑。
• 自定义IActionResult冗余：Azure Functions HTTP触发器推荐直接使用内置的OkObjectResult等返回类型，无需自定义HttpResponseMessageResult，简化代码的同时避免响应头处理的潜在问题。

优化后的C#代码：

using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using System.IO;
using System.Threading.Tasks;

public static class Function1
{
    [FunctionName("Function1")]
    public static async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
        ILogger log)
    {
        log.LogInformation("C# HTTP触发器处理了一个请求。");

        try
        {
            string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
            dynamic[] data = JsonConvert.DeserializeObject<dynamic[]>(requestBody);

            if (data == null || data.Length == 0)
            {
                return new BadRequestObjectResult("请求体不能为空或格式错误");
            }

            string area_harvested = data[0].Area_Harvested;
            string farmgateprice = data[0].FarmGatePricePHPPSA;

            log.LogInformation($"area_harvested: {area_harvested}");
            log.LogInformation($"farmgateprice: {farmgateprice}");

            // 使用内置返回类型直接响应
            return new OkObjectResult("Response content");
        }
        catch (JsonSerializationException ex)
        {
            log.LogError(ex, "请求体JSON解析失败");
            return new BadRequestObjectResult("请求体JSON格式错误");
        }
        catch (System.Exception ex)
        {
            log.LogError(ex, "处理请求时发生未知错误");
            return new StatusCodeResult(StatusCodes.Status500InternalServerError);
        }
    }
}

3. 跨域（CORS）配置检查 #

浏览器端JS调用会受跨域限制，而Postman不受此约束，需确认Azure Functions的CORS配置：

• 登录Azure门户，找到目标函数应用
• 左侧菜单选择「CORS」
• 将前端域名添加到「允许的来源」列表，测试阶段可临时用*（生产环境不建议）
• 保存配置后重新测试

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