如何将 Azure Httptrigger 连接到网站？

Question

我在创建网站/前端方面的经验有限 - 只是 HTML/CSS - 并且主要在后端工作 - Azure 函数中的 Node.js。

我创建了一个 Azure 函数 (httptrigger)，我希望在我的网站上点击一个按钮。

例如，像搜索栏一样，我希望用户输入内容并单击搜索。在他们点击搜索后，我想用查询字符串中的搜索内容点击 http 触发器。

点击触发器后，我希望它返回一些数据以显示在网页上。

我正在努力将搜索内容添加到查询字符串（并且可能安全地隐藏 httptrigger 端点？）以及如何将数据发送回 html 网站。

目前，我已经构建了 httptrigger 来工作并通过 context.res= {body: html} 返回 html 数据，当我将 httptrigger url 发布到我的浏览器中时它可以正常工作，但是我当然希望它能够发送回数据并影响当前网页使用搜索栏，在其下方添加结果。

这里的任何指针或提示将不胜感激，因为我对将前端缝合在一起的经验并不丰富。

谢谢！

Answer 1

所以我的建议是稍微分解一下，并可能根据该分解创建一些新的更具体的问题。因为它是相当广泛的。

意识到，从您的网站（前端）的角度来看，点击和 Azure 函数 Http 触发器与任何其他 REST 端点并没有什么不同，并且如何将其连接到前端的答案会有很大差异基于您可能正在使用的任何框架（有时这些框架甚至还希望以特定方式返回数据）。

考虑到这些知识，在尝试使用 UI 之前，我将首先专注于确保正确配置 Azure 函数并生成您期望的 JSON 结果。在这方面我可以给你一些建议：

• 您提到“隐藏”您的端点。您需要首先确定如何保护它，因为只要它在互联网上，您就无法“隐藏”它。如果它是一个匿名站点，那么您将有有限的选择。如果您登录后，您有更多选择，但大多数最佳实践使用某种基于令牌的方法（Oauth、自定义等）。 Azure Functions 确实具有可以传入的功能键的概念，但这实际上仅适用于 API 的非浏览器使用，在这些情况下它们可以保密。您添加到前端的任何密钥对所有人都是可见的，并且基本上没有用（除非您只是想阻止人们随机访问您的端点）。
• 更新 Azure Functions 中的 CORS 设置，以确保配置了使用 API 的域，否则您将被浏览器中的跨域限制阻止。更多信息请访问https://docs.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors
• 使用您想要的格式创建一个包含一些模拟数据的函数（您可以稍后循环并在它工作后从真实数据源中提取它）。下面的代码段示例使用了几个硬编码状态。

module.exports = function(context, req) {
  if (req.query.filter) {
    // Do something with the filter parameter when loading results
    context.res = {
      body: '[{"name": "New York","abbreviation": "NY"},{"name": "Ohio","abbreviation": "OH"}]',
      headers: {
        'Content-Type': 'application/json'
      }
    };
  } else {
    context.res = {
      status: 400,
      body: "Please pass a filter on the query string"
    };
  }
  context.done();
};

一旦你有一个返回数据的工作函数，然后继续处理你的 UI 集成。