Blazor WASM Невозможно загрузить статическую HTML-страницу из папки wwwroot

Я создал статическую html-страницу в папке wwwroot, которая имеет собственные js и css.

При попытке перейти по URL-адресу в режиме инкогнито в браузере https://baseURL/Terms.html он перенаправляется наTerms.html в первый раз, но один раз, когда приложение загружается в браузере, и после попытки нажать https://baseURL/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 и новый компонент Razor с использованием PublicLayout, он успешно отобразил содержимое 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);
        }

Есть ли у вас app.UseStaticFiles(); ссылка на промежуточное программное обеспечение в файле program.cs?

Md Farid Uddin Kiron 08.04.2024 07:35

Я попробовал использовать промежуточное программное обеспечение app.UseStaticFiles(), но проблема все еще сохраняется. Я наткнулся на это решение stackoverflow.com/a/70865072/2206420, и оно сработало.

Kalpesh Bhadra 08.04.2024 16:43
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
87
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 === '/';

Это решение из Проблемы с aspnetcore на Github

Другие вопросы по теме