如何将 Azure Httptrigger 连接到网站？

Posted 2023-02-19

【中文标题】如何将 Azure Httptrigger 连接到网站？

【英文标题】：How do I connect Azure Httptrigger to website?

【发布时间】：2019-02-11 21:57:40

【问题描述】：

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

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

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

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

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

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

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

谢谢！

【问题讨论】：

首先，除非您有调用它的后端，否则您将无法对用户隐藏函数 url。如果您对此感到满意，那么实现您提出的解决方案的最佳选择是使用 javascript 和 ajax 将请求发送到函数。但是，您的 html 是如何托管的？您知道 node.js，那么您是否考虑过托管 node 应用的 azure 应用服务？

抱歉不理解 - 你是什么意思它是如何托管的？它位于 hostgator 上，与 Azure 分开托管。你是什​​么意思节点应用程序的天蓝色应用程序服务？您还指的是哪个节点应用程序？我的 httptrigger 已经在 azure 函数应用服务中。

这回答了我的问题。您可以像 docs.microsoft.com/en-us/azure/app-service/… 这样在 azure 应用服务中托管完整的独立 node.js Web 应用。如果这对您不起作用，我认为您需要使用 ajax 从 html 页面点击功能应用程序。

好的，您的意思是完全在新的应用服务上创建网站/页面？我可以将我当前的网站连接到这个网站以使网址不包括azurewebsites吗？或者我应该只在 azure 上托管此页面。您认为这是最好的前进方式吗？

我建议将整个网站托管在应用服务上，尽管这可能会比您现在所做的更昂贵。如果您只关心 azurewebsites.net 域，可以为函数应用设置自定义域。

【参考方案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 集成。

【讨论】：

感谢您的冗长回复 - 您还建议将其作为 Azure Web 应用程序启动，而不是继续使用它现在的位置 (hostgator)？

我最初的问题是，对于我当前的外部托管网页（搜索栏），用户如何在搜索栏中键入，点击搜索，然后点击我的 httptrigger 并返回结果。如果这能解决问题，那将是一个相当广泛的问题。

我相信 Azure Functions 是托管 API 端点的好选择。标准应用程序服务（Web 应用程序）也是托管您的网站页面（客户端）的不错选择。如果您的需求非常简单，您甚至可以在 Azure Blob 存储 (azure.microsoft.com/en-us/blog/…) 中托管静态页面，尽管它的功能远不及 Azure 应用服务，但它非常便宜。

关于前端。我没有详细说明的原因是因为选项太多而无法提及。如果您使用的是框架（例如 React、Angular、Vue），其中许多都具有针对该平台的特定自动完成\预输入实现（这是过去几年的总体趋势）。如果您正在寻找更多香草或简单 jquery 的东西，那么还有其他选择。如果您可以缩小范围，我可能会为您指出一个或另一个方向，以便图书馆尝试。

所以我已经涉足使用 Azure 创建网页，但这里列出了问题***.com/questions/52210776/… - 使用这种方法我不确定为什么在 Azure 上托管网页比在我当前的域上托管更可取主机？你能解释一下为什么它会是有益的吗？