azure-devops - Blazor 路由在 Azure DevOps iframe 中失败

Question

我有一个简单的 Blazor网站 ( source code ) 在 Azure Devops 上的 iframe 中运行时存在路由问题但不是其他地方。

在以下条件下运行时，应用程序工作正常

在我的 PC 上使用 Visual Studio (VS2019) 使用“F5”

使用 Visual Studio 的“发布”功能将项目发布到光盘后，在本地作为静态站点

本地作为另一个不相关站点的 iframe 内的静态站点

将发布的站点上传到主机后远程作为托管静态站点

远程作为另一个不相关站点的 iframe 中的静态站点(第二个静态站点模仿 AzureDevOps 板，使用不同的主机名)

但是，当我生成 Azure Devops widget 时并将其上传到 Visual Studio Marketplace根据此屏幕截图，Blazor 路由失败，因此站点无法正确加载。



该站点的源代码(只不过是默认 VS Blazor 模板的简化版本)可以在 here 中找到。 .

观察

所有与 blazor 相关的 Assets (即 Blazor 和 mono javascript 文件以及各种 DLL 文件)都成功提供给浏览器

blazor DLL 成功运行(即 Programs.cs 成功启动 - Console.WriteLine 和 Program.cs 中的语句证明了这一点)

blazor 未能成功找到默认路由，因此 StartUp.cs (在 <NotFoundContent> 中定义)标签显示在 Azure Devops iframe 中

我试图解决问题的事情

定义 App.razor如 base href 中的“/”

定义 wwwroot\index.html作为 base href 中的“/dist”

在 wwwroot\index.html 中定义路由文件使用 index.cs属性

动态定义 [Route]在 base href在运行时使用 javascript(这可以满足 Microsoft 对 iframe 父 URL 的任何更改)

笔记

全部 Azure Devops widgets在 Azure Devops 内的 iframe 内运行.

上传到 Visual Studio Marketplace 的 vsix 文件 can be found here .

Answer 1

不出所料，修复最终与无效路由有关。

基本上，需要使用 NavigationManager 将用户重定向到 Blazor 页面本身。按照以下 app.razor 中的示例，其中目标 Razor 页面包含

@page "/mypage"

@using Microsoft.AspNetCore.Components.Routing
@inject NavigationManager navigationManager
@{navigationManager.NavigateTo(@navigationManager.Uri.Replace("index.html", "") + "mypage");}

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Index)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

一个完整的例子可以在分支 feature/StackOverflowFix 中看到。 here现已发布到 Visual Studio Marketplace .