使用 Azure Function App 为调用本机身份验证 API 的单页应用设置反向代理（预览版）

适用于： 员工租户 外部租户（了解详细信息）

本文介绍如何通过使用 Azure Functions 应用程序在单页应用（SPA）的测试环境中设置反向代理以管理 CORS 标头，该应用使用 本机身份验证 API。

本机身份验证 API 不支持跨域资源共享（CORS）。 因此，使用此 API 进行用户身份验证的单页应用无法从前端 JavaScript 代码发出成功的请求。 若要解决此问题，需要在 SPA 和本机身份验证 API 之间添加代理服务器。 此代理服务器将相应的 CORS 标头注入响应中。

此解决方案用于测试目的，不得在生产环境中使用。 如果要查找在生产环境中使用的解决方案，建议使用 Azure Front Door 解决方案，请参阅 使用 Azure Front Door 作为反向代理来管理生产中 SPA 的 CORS 标头的说明。

先决条件

• 一份 Azure 订阅。 免费创建帐户。
• 注册 Microsoft.App 资源提供程序，请参阅 如何注册资源提供程序。 只需为每个新创建的订阅完成此步骤一次。
• 安装 Azure 开发人员 CLI （azd）。
• 一个可以通过诸如 http://www.contoso.com的 URL 访问的 SPA 示例。
  • 可以使用 快速入门中所述的 React 应用：使用本机身份验证 API将用户登录到示例 React SPA。 但是，请勿配置或运行代理服务器，因为本指南介绍了如何设置。
  • 运行应用后，请记录应用 URL，以便在本指南中稍后使用。

使用 Azure 开发人员 CLI （azd） 模板在 Azure 函数应用中创建反向代理

1. 若要初始化 azd 模板，请运行以下命令：

   azd init --template https://github.com/azure-samples/ms-identity-extid-cors-proxy-function
   

   出现提示时，输入 azd 环境的名称。 此名称用作资源组的前缀，因此它应在 Azure 订阅中是唯一的。

2. 若要登录到 Azure，请运行以下命令：

   azd auth login
   

3. 若要生成、预配和部署应用资源，请运行以下命令：

   azd up
   

   出现提示时，输入以下信息以完成资源创建：

   • Azure Location：部署资源的 Azure 位置。
   • Azure Subscription：部署资源的 Azure 订阅。
   • corsAllowedOrigin：允许 CORS 请求的源域，格式为 SCHEME：//DOMAIN：PORT，例如 http://localhost:3000。
   • tenantSubdomain：我们正在代理的外部租户的子域。 例如，如果租户主域名是 contoso.onmicrosoft.com，请使用 contoso。 如果没有租户子域，请了解如何 阅读租户详细信息。

使用反向代理测试示例 SPA

1. 在示例 SPA 中，打开 API\React\ReactAuthSimple\src\config.ts 文件，然后替换：

   • BASE_API_URL、http://localhost:3001/api和https://Enter_App_Function_Name_Here.azurewebsites.net的值。
   • 具有函数应用名称的占位符 Enter_App_Function_Name_Here 。 如有必要，请重新运行示例 SPA。

2. 浏览到示例 SPA URL，然后测试注册、登录和密码重置流。 SPA 应用应正常工作，因为反向代理正确管理 CORS 标头。

相关内容

• 在生产环境中，使用 Azure Front Door 作为 SPA 的反向代理，该 SPA 使用本机身份验证。