共用方式為

設定使用 Azure Functions 應用程式（預覽）的單頁應用程式反向代理，以呼叫原生驗證 API 。

適用於：白色圓圈內有灰色 X 符號。 員工租戶 綠色圓圈內的白色勾選符號。 外部租戶（深入了解）

在本文中，您將學習如何使用 Azure Functions 應用程式建立一個反向代理，以便在測試環境中管理單頁應用程式（SPA）中使用 原生驗證 API的 CORS 標頭。

原生驗證 API 不支援跨原始來源資源分享 （CORS）。 因此，使用此 API 進行使用者驗證的單頁應用程式無法從前端 JavaScript 程式代碼提出成功的要求。 若要解決此問題，您必須在 SPA 與原生驗證 API 之間新增 Proxy 伺服器。 此 Proxy 伺服器會將適當的 CORS 標頭插入回應中。

此解決方案僅供測試之用，且 不應用於生產環境。 如果您要尋找在生產環境中使用的解決方案，建議您使用 Azure Front Door 解決方案，請參閱 使用 Azure Front Door 作為反向代理來管理生產環境下的 SPA 的 CORS 標頭的指示。

先決條件

使用 Azure 開發人員命令列介面（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。 如果您沒有租戶子域，請瞭解如何 閱讀租戶詳細資料。

使用反向 Proxy 測試範例 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 應用程式應該正常運作，因為反向 Proxy 會正確管理 CORS 標頭。

相關內容