Blazor WASM 无法从 wwwroot 文件夹加载静态 html 页面

Question

我在wwwroot文件夹下创建了静态html页面，它有自己的js和css。

尝试在浏览器中以隐身模式点击网址 https://baseURL/Terms.html 时，它第一次重定向到Terms.html，但当应用程序在浏览器中加载时以及尝试点击 https://baseURL/Terms.html 之后，会重定向到Terms.html然后它重定向到登录页面。

我还移动了静态文件根文件夹，但输出相同。

看起来Terms.html页面正在渲染MainLayout.razor

我正在使用 Blazor WebAssembly 并在 App.razor 中有以下代码

//App.razor
    <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        <UnAuthorized />
                    </NotAuthorized>
                </AuthorizeRouteView>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
    </CascadingAuthenticationState>

UnAuthorized.razor 是组件，写在代码下面

@inject NavigationManager NavigationManager

<MudGrid>
    <MudItem xs="12">
        <MudGrid>
            You are not authorized to access this page.
        </MudGrid>
    </MudItem>
</MudGrid>

@code {

    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authenticationState = await AuthenticationStateTask;

        if (authenticationState?.User?.Identity is null || !authenticationState.User.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/login", true);
        }

        StateHasChanged();
    }
}

在MainLayout.cs中写下下面的代码

<AuthorizeView>
    <NotAuthorized>
        <UnAuthorized />
    </NotAuthorized>

</AuthorizeView>

尝试了以下解决方案： 在 App.Razor 中实现以下代码

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            @* Check if the requested URL ends with ".html" *@
            @if (ShouldBypassAuthorization(NavigationManager.Uri))
            {
                <StaticFileView PagePath="@NavigationManager.Uri"></StaticFileView>
            }
            else
            {
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        <UnAuthorized />
                    </NotAuthorized>
                </AuthorizeRouteView>
            }
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>



   @code {
        [Inject]
        protected NavigationManager NavigationManager { get; set; }
    
        // Method to check if the requested URL ends with ".html"
        bool ShouldBypassAuthorization(string url)
        {
            return url != null && url.EndsWith(".html", StringComparison.OrdinalIgnoreCase);
        }

}

创建剃刀组件StaticHtmlPage.razor

@code {
    [Parameter]
    public string PagePath { get; set; }
}

<iframe src="@PagePath" frameborder="0" style="width: 100%; height: 100vh;"></iframe>

还尝试通过使用 PublicLayout 创建单独的布局名称作为 PublicLayout 和新的 Razor 组件，它成功地将 HTML 内容呈现为 htmlContent 字符串，但多个 css 和 JS 发生冲突

 @layout PublicLayout
    @inject HttpClient HttpClient;
    @page "/TermsTest"
    @using System.IO
    
    @inject IJSRuntime JSRuntime
    
    @attribute [AllowAnonymous]
    @if (!string.IsNullOrEmpty(htmlContent))
    {
        <div @innerHTML="htmlContent"></div>
    }
    
    @((MarkupString)htmlContent)
    
    @code{
       
        private string htmlContent;
        protected override async Task OnInitializedAsync()
        { 
            htmlContent = await HttpClient.GetStringAsync("Terms.html");
            Console.WriteLine(htmlContent);
        }

Answer 1

我已经通过修改

service-worker.published.js

文件解决了这个问题。

blazor 中有两个文件

service-worker.js

和

service-worker.published.js

。第一个文件用于本地主机，防止在本地环境中进行缓存。

我在 service-worker.publish.js 中进行了以下更改

由此

const shouldServeIndexHtml = event.request.mode === 'navigate';

对此，

const shouldServeIndexHtml = event.request.mode === 'navigate' && new URL(event.request.url).pathname === '/';

这是解决方案来自Github aspnetcore问题