node.js - 如何将 Azure Httptrigger 连接到网站？

Question

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

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

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

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

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

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

这里的任何指示或提示将不胜感激，因为我在将前端缝合在一起方面没有太多经验。

谢谢!

Answer 1

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

认识到，从网站(前端)的角度来看，点击和 Azure Function Http Trigger 与任何其他 REST 端点没有任何不同，并且如何将其连接到前端的答案将有很大差异基于您可能使用的任何框架(有时这些框架甚至希望以特定方式返回数据)。

考虑到这些知识，我将首先关注确保您的 Azure Function 已正确配置并生成您期望的 JSON 结果，然后再尝试使用 UI。我可以在这方面给你一些建议:

• 您提到“隐藏”您的端点。您需要首先确定如何保护它，因为只要它位于互联网上，您就无法“隐藏”它。如果它是一个匿名网站，您的选择将受到限制。如果您需要登录，您有更多选择，但大多数最佳实践都使用某种基于 token 的方法(Oauth、自定义等)。 Azure Functions 确实具有可以传入的功能键的概念，但这实际上仅适用于 API 的非浏览器使用，在这种情况下它们可以保密。您添加到前端的任何 key 对每个人来说都是可见的，并且基本上没有用(除非您只是想阻止人们随机访问您的端点)。
• 更新 Azure Functions 中的 CORS 设置，以确保配置使用您的 API 的域，否则您将受到浏览器中跨域限制的阻止。更多信息请访问https://learn.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 集成问题。