通过

在生产环境中将 Azure Front Door 用作使用本机身份验证的单页应用的反向代理（预览版）

适用于：白色圆圈，带灰色 X 符号。 员工租户 绿色圆圈，带白色对勾符号。 外部租户（了解详细信息）

本文介绍如何使用 Azure Front Door 作为单页应用（SPA）的反向代理，该应用使用 本机身份验证 API。

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

在生产环境中，建议将 Azure Front Door 与标准/高级订阅结合用作反向代理。

先决条件

将 Azure Front Door 设置为反向代理

  1. 通过阅读有关 将 Azure Front Door 标准版/高级版与 CORS 配合使用的文章，熟悉如何将 Azure Front Door 与 CORS 配合使用。
  2. 使用启用外部租户应用自定义 URL 域中的说明，将自定义域名添加到您的外部租户。
  3. 在示例 SPA 中，打开 API\React\ReactAuthSimple\src\config.ts 文件，然后将 BASE_API_URL的值（http://localhost:3001/api）替换为 https://Enter_Custom_Domain_URL/Enter_the_Tenant_ID_Here。 替换占位符：
    1. 将 Enter_Custom_Domain_URL 替换为自定义域 URL，例如 contoso.com。
    2. 将 Enter_the_Tenant_ID_Here 替换为目录（租户）ID。 如果没有租户 ID，请了解如何读取租户详细信息。
  4. 如有必要，请重新运行示例 SPA。

使用 Azure 开发人员 CLI （azd） 模板创建 Azure Front Door 作为反向代理

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

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

    出现提示时，输入 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。 如果没有租户子域，请了解如何 阅读租户详细信息。
    • customDomain：外部 ID 中配置的自定义域的完整 URL，例如 login.example.com。

将 Azure Front Door 用作反向代理的准则

将 Azure Front Door 设置为反向代理以管理生产环境中的 CORS 标头时，建议遵循以下准则：

限制来源

配置 Azure Front Door 时，仅允许 SPA 域 URL（如 https://www.contoso.com）作为源。 避免使用可能允许所有来源的配置，例如*，因为这可能导致安全漏洞。

使用简单请求

本地身份验证请求已满足 简单请求的所有条件：

  • 使用 Http Method: POST。
  • 使用 Content-Type: application/x-www-form-urlencoded。
  • 请求不需要自定义标头。
  • 请求不涉及请求中的 ReadableStream 对象。
  • 请求不需要使用 XMLHttpRequest。

相关内容