如何将Web应用与Azure Functions对接实现带参数的CRUD操作？

前端表单请求配置 #

针对每个CRUD操作，在Web表单中绑定对应的请求逻辑，直接调用Azure Functions的HTTP触发URL并传递表单参数：

示例：Create操作的表单与请求代码 #

<!-- Create表单 -->
<form id="createForm">
  <input type="text" name="name" placeholder="名称" required>
  <input type="text" name="description" placeholder="描述" required>
  <button type="submit">创建</button>
</form>

<script>
document.getElementById('createForm').addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止表单默认跳转行为
  
  // 收集表单数据并转为JSON格式
  const formData = new FormData(e.target);
  const payload = Object.fromEntries(formData);
  
  try {
    // 调用Azure Functions的Create接口
    const response = await fetch('https://your-function-app.azurewebsites.net/api/Create', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 若函数启用密钥验证，添加此头部：'x-functions-key': 'your-function-access-key'
      },
      body: JSON.stringify(payload)
    });
    
    if (response.ok) {
      alert('创建成功');
      e.target.reset(); // 重置表单
    } else {
      const errorMsg = await response.text();
      alert(`创建失败：${errorMsg}`);
    }
  } catch (err) {
    alert(`请求出错：${err.message}`);
  }
});
</script>

其他操作适配 #

• Read：使用GET请求，通过URL查询参数传递筛选条件（如https://your-function-app.azurewebsites.net/api/Read?id=123），函数返回数据后直接渲染到页面
• Update：逻辑类似Create，但改用PUT方法，需传递待更新的ID和新数据
• Delete：使用DELETE方法，通过URL路径参数（如https://your-function-app.azurewebsites.net/api/Delete/123）或查询参数传递待删除的ID

Azure Functions端参数接收 #

确保每个函数绑定对应HTTP方法，并正确解析前端传递的参数：

示例：C#版Create函数接收JSON参数 #

[FunctionName("Create")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Function, "post", Route = null)] HttpRequest req,
    ILogger log)
{
    log.LogInformation("处理Create请求");

    // 读取请求体的JSON数据
    string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
    var item = JsonConvert.DeserializeObject<YourDataModel>(requestBody);

    if (item == null || string.IsNullOrEmpty(item.Name))
    {
        return new BadRequestObjectResult("参数不完整");
    }

    // 执行已实现的SQL Create操作
    await YourSqlHelper.CreateItem(item);

    return new OkObjectResult("创建成功");
}

示例：JavaScript版Create函数接收表单数据 #

module.exports = async function (context, req) {
    context.log('处理Create请求');

    // 直接从请求体读取表单参数
    const name = req.body.name;
    const description = req.body.description;

    if (!name || !description) {
        context.res = {
            status: 400,
            body: "参数不完整"
        };
        return;
    }

    // 执行已实现的SQL Create操作
    await yourSqlHelper.createItem({ name, description });

    context.res = {
        status: 200,
        body: "创建成功"
    };
};

跨域（CORS）配置 #

Web应用与Azure Functions分属不同域名时，会触发浏览器跨域限制，需在Azure Portal中配置：

1. 进入目标Function App
2. 左侧菜单选择CORS
3. 在允许的来源中添加Web应用的域名（本地调试可添加http://localhost:端口号）
4. 保存配置

调试与排查 #

• 前端调试：打开浏览器开发者工具的网络标签，查看请求的状态码、请求头和请求体，确认参数是否正确发送
• 函数端调试：在Azure Portal的Function App中，进入对应函数的监控->日志流，查看请求日志和错误信息，确认参数是否被正确解析
• 密钥验证：若函数启用了访问密钥，确保请求头中携带了正确的x-functions-key值

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