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

Question

我们有一个 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 returns，则会出现错误，指出在页面上加载脚本时出现问题，并且不会呈现登录表单。

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

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

请问有什么关于针对 CDN 配置 B2C 的帮助吗？

Answer 1

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

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

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

B2C Custom Policy LoadUri against a CDN fails to load signin form

azure

cors

sta