针对 CDN 的 B2C 自定义策略 LoadUri 无法加载登录表单

问题描述

我们有一个 B2C，其中包含用于注册、登录和社交登录的自定义策略，基本页面布局从 CDN (base.html) 加载，我们的自定义页面布局非常简单：

<!DOCTYPE html>
<html>
    <head>
        <Meta charset="utf-8">
        <title>Login</title>
        <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container">
            <div class="d-flex justify-content-center h-100">
                <div class="card">
                    <div id="api"></div>
                </div>
            </div>
        </div>
        <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
        <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    </body>
</html>

在我们的自定义策略中，我们使用这样的 ContentDeFinition：

       <ContentDeFinition Id="api.signuporsignin">
        <LoadUri>https://XXXXX.z16.web.core.windows.net/{OIDC:ClientId}/base.html</LoadUri>
        <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
        <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.4</DataUri>
        <Metadata>
          <Item Key="displayName">Signin and Signup</Item>
        </Metadata>
      </ContentDeFinition>

工作正常，因为从静态网站 (STA) 检索 base.html 而不是通过 blob STA 配置的 Azure CDN。如果我们将指向 https://xxx.azureedge.net/{OIDC:ClientId}/base.html 的 LoadUri 更改为 CDN 端点 B2C 将返回错误，指出在页面上加载脚本时出现问题，但未呈现登录表单。

在任何浏览器中同时使用来自静态网站和 CDN 的 URL 会正确呈现页面，该页面为白色空白，只有一个登录标题。

当 B2C 尝试从 CDN 请求此页面时，我认为是 CORS 问题。我已经在我的 STA 中配置了 CORS，添加了我的 B2C 租户，如下图所示，但根本不起作用：

请帮忙针对 CDN 配置 B2C 吗？

解决方法

如果此处存在 CORS 问题，则可能出在 CDN 中：https://docs.microsoft.com/en-us/azure/cdn/cdn-cors。

根据文档，您可以创建一个规则来设置正确的响应头：

azure azure azure cors cors cors sta