Open Closed

LeptonX Issue with hosting on subpath #4608

User avatar
0
jfistelmann created

It seems like styles are not loaded properly when hosted under a subpath (like /booking).

  • ABP Framework version: v7.0.2
  • UI type: Blazor
  • DB provider: EF Core / MongoDB
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace:

Browser logs 

Navigated to https://localhost:44444/booking
msgport.js:70 {"notify":"init_tab"}
booking:89 
        
      
GET https://localhost:44444/favicon.ico 404
blazor.server.js?_v=638101739740000000:1 [2023-02-26T15:17:16.382Z] Information: WebSocket connected to wss://localhost:44444/booking/_blazor?id=u--jChdnGbDVmiZz6FB5XQ.
lepton-x.bundle.min.js?_v=638122179560000000:2 
        
GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/bootstrap-light.css net::ERR_ABORTED 404
e.replaceStyleWith @ lepton-x.bundle.min.js?_v=638122179560000000:2
loadThemeCSS @ style-initializer.js?_v=638122179560000000:13
(anonymous) @ style-initializer.js?_v=638122179560000000:35
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.dispatch @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.dispatch @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.changeTheme @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.setInitialDefaultValue @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.withPersistedValue @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.create @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.createSettingGroups @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.create @ lepton-x.bundle.min.js?_v=638122179560000000:2
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.run @ lepton-x.bundle.min.js?_v=638122179560000000:2
window.initLeptonX @ style-initializer.js?_v=638122179560000000:39
(anonymous) @ blazor.server.js?_v=638101739740000000:1
beginInvokeJSFromDotNet @ blazor.server.js?_v=638101739740000000:1
_invokeClientMethod @ blazor.server.js?_v=638101739740000000:1
_processIncomingData @ blazor.server.js?_v=638101739740000000:1
Ft.connection.onreceive @ blazor.server.js?_v=638101739740000000:1
i.onmessage @ blazor.server.js?_v=638101739740000000:1
lepton-x.bundle.min.js?_v=638122179560000000:2 
        
      
GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/light.css net::ERR_ABORTED 404
e.replaceStyleWith @ lepton-x.bundle.min.js?_v=638122179560000000:2
loadThemeCSS @ style-initializer.js?_v=638122179560000000:13
(anonymous) @ style-initializer.js?_v=638122179560000000:36
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.dispatch @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.dispatch @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.changeTheme @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.setInitialDefaultValue @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.withPersistedValue @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.create @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.createSettingGroups @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.create @ lepton-x.bundle.min.js?_v=638122179560000000:2
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.run @ lepton-x.bundle.min.js?_v=638122179560000000:2
window.initLeptonX @ style-initializer.js?_v=638122179560000000:39
(anonymous) @ blazor.server.js?_v=638101739740000000:1
beginInvokeJSFromDotNet @ blazor.server.js?_v=638101739740000000:1
_invokeClientMethod @ blazor.server.js?_v=638101739740000000:1
_processIncomingData @ blazor.server.js?_v=638101739740000000:1
Ft.connection.onreceive @ blazor.server.js?_v=638101739740000000:1
i.onmessage @ blazor.server.js?_v=638101739740000000:1

blazor logs

[16:21:23 INF] Request starting HTTP/2 GET https://localhost:44444/booking - -
[16:21:26 INF] Executing endpoint '/_Host'
[16:21:26 INF] Route matched with {page = "/_Host", area = "", action = "", controller = ""}. Executing page /_Host
[16:21:26 INF] Skipping the execution of current filter as its not the most effective filter implementing the policy Microsoft.AspNetCore.Mvc.ViewFeatures.IAntiforgeryPolicy
[16:21:26 INF] Executing an implicit handler method - ModelState is Valid
[16:21:26 INF] Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
[16:21:26 INF] Executed page /_Host in 135.029ms
[16:21:26 INF] Executed endpoint '/_Host'
[16:21:26 INF] Request finished HTTP/2 GET https://localhost:44444/booking - - - 200 - text/html;+charset=utf-8 3031.1221ms
[16:21:26 INF] Request starting HTTP/2 POST https://localhost:44444/booking/_blazor/disconnect multipart/form-data;+boundary=----WebKitFormBoundaryAQK87RduBrQ8EPdc 359
[16:21:26 INF] No CORS policy found for the specified request.
[16:21:26 INF] Executing endpoint 'Blazor disconnect'
[16:21:26 INF] Executed endpoint 'Blazor disconnect'
[16:21:26 INF] Request finished HTTP/2 POST https://localhost:44444/booking/_blazor/disconnect multipart/form-data;+boundary=----WebKitFormBoundaryAQK87RduBrQ8EPdc 359 - 200 0 - 27.2675ms
[16:21:26 INF] Request starting HTTP/2 GET https://localhost:44444/_framework/aspnetcore-browser-refresh.js - -
[16:21:26 INF] Request starting HTTP/2 GET https://localhost:44444/_vs/browserLink - -
[16:21:26 INF] Request finished HTTP/2 GET https://localhost:44444/_framework/aspnetcore-browser-refresh.js - - - 200 12000 application/javascript;+charset=utf-8 2.8023ms
[16:21:26 INF] Request starting HTTP/2 GET https://localhost:44444/booking/_blazor/initializers - -
[16:21:27 INF] Executing endpoint 'Blazor initializers'
[16:21:27 INF] Executed endpoint 'Blazor initializers'
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/booking/_blazor/initializers - - - 200 - application/json;+charset=utf-8 13.3728ms
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/_vs/browserLink - - - 200 - text/javascript;+charset=UTF-8 25.2235ms
[16:21:27 INF] Request starting HTTP/2 GET https://localhost:44444/booking/_content/toast_ui.blazor_calendar/tui-calendar.css.map - -
[16:21:27 INF] Request starting HTTP/2 GET https://localhost:44444/booking/libs/bootstrap/css/bootstrap.css.map - -
[16:21:27 INF] Sending file. Request path: '/libs/bootstrap/css/bootstrap.css.map'. Physical path: 'omitted here'
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/booking/libs/bootstrap/css/bootstrap.css.map - - - 200 538014 text/plain 12.9745ms
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/booking/_content/toast_ui.blazor_calendar/tui-calendar.css.map - - - 404 0 - 23.4318ms
[16:21:27 INF] Request starting HTTP/2 GET https://localhost:44444/booking/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/libs/bootstrap/js/bootstrap.bundle.min.js.map - -
[16:21:27 INF] Sending file. Request path: '/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/libs/bootstrap/js/bootstrap.bundle.min.js.map'. Physical path: 'C:\Nuget\volo.abp.aspnetcore.components.web.leptonxtheme\2.0.2\staticwebassets\side-menu\libs\bootstrap\js\bootstrap.bundle.min.js.map'
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/booking/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/libs/bootstrap/js/bootstrap.bundle.min.js.map - - - 200 331017 text/plain 3.7991ms
[16:21:27 INF] Request starting HTTP/2 POST https://localhost:44444/booking/_blazor/negotiate?negotiateVersion=1 - 0
[16:21:27 INF] No CORS policy found for the specified request.
[16:21:27 INF] Executing endpoint '/_blazor/negotiate'
[16:21:27 INF] Executed endpoint '/_blazor/negotiate'
[16:21:27 INF] Request finished HTTP/2 POST https://localhost:44444/booking/_blazor/negotiate?negotiateVersion=1 - 0 - 200 316 application/json 16.8755ms
[16:21:27 INF] Request starting HTTP/2 CONNECT https://localhost:44444/booking/_blazor?id=cJakNNp9vG7pXV_XGnSfhQ - -
[16:21:27 INF] No CORS policy found for the specified request.
[16:21:27 INF] Executing endpoint '/_blazor'
[16:21:28 INF] Request starting HTTP/2 GET https://localhost:44444/api/account/profile-picture-file/3a099c63-1cd0-339b-566f-8ee634b1a88c - -
[16:21:28 INF] Executing endpoint 'Volo.Abp.Account.AccountController.GetProfilePictureFileAsync (Volo.Abp.Account.Pro.Public.HttpApi)'
[16:21:28 INF] Route matched with {area = "account", action = "GetProfilePictureFile", controller = "Account", page = ""}. Executing controller action with signature System.Threading.Tasks.Task`1[Volo.Abp.Content.IRemoteStreamContent] GetProfilePictureFileAsync(System.Guid) on controller Volo.Abp.Account.AccountController (Volo.Abp.Account.Pro.Public.HttpApi).
[16:21:29 INF] Request starting HTTP/2 GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/bootstrap-light.css - -
[16:21:29 INF] Request starting HTTP/2 GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/light.css - -
[16:21:29 INF] Request finished HTTP/2 GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/light.css - - - 404 0 - 14.7841ms
[16:21:29 INF] Request finished HTTP/2 GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/bootstrap-light.css - - - 404 0 - 18.4347ms
[16:21:29 INF] Start processing HTTP request GET https://secure.gravatar.com/avatar/772e4c7cf714ec0307112ac91dcdca47
[16:21:29 INF] Sending HTTP request GET https://secure.gravatar.com/avatar/772e4c7cf714ec0307112ac91dcdca47
[16:21:29 INF] Received HTTP response headers after 154.4608ms - 200
[16:21:29 INF] End processing HTTP request after 158.4783ms - 200
[16:21:29 INF] Executing ObjectResult, writing value of type 'Volo.Abp.Content.RemoteStreamContent'.
[16:21:29 INF] Executed action Volo.Abp.Account.AccountController.GetProfilePictureFileAsync (Volo.Abp.Account.Pro.Public.HttpApi) in 922.4114ms
[16:21:29 INF] Executed endpoint 'Volo.Abp.Account.AccountController.GetProfilePictureFileAsync (Volo.Abp.Account.Pro.Public.HttpApi)'
[16:21:29 INF] Request finished HTTP/2 GET https://localhost:44444/api/account/profile-picture-file/3a099c63-1cd0-339b-566f-8ee634b1a88c - - - 200 2637 image/jpeg 944.2043ms
  • Steps to reproduce the issue:"

Make new Blazor server abp project.

Do the usual migration stuff as you need

Change blazor appsettings so that it is hosted under a sub path

"App": {
    "SelfUrl": "https://localhost:44444/booking",
    // ...
  },
 "AuthServer": {
    "Authority": "https://localhost:44444/booking",
    // ...
  },

In BlazorModule, change OnApplicationInitialization to the following

public override void OnApplicationInitialization(ApplicationInitializationContext context)
    {
        var env = context.GetEnvironment();
        var app = context.GetApplicationBuilder();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseAbpRequestLocalization();

        if (!env.IsDevelopment())
        {
            app.UseErrorPage();
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseCorrelationId();
        app.UseStaticFiles("/booking"); // this is new
        app.UsePathBase("/booking"); // this is new
        app.UseRouting();

        app.UseAuthentication();
        app.UseJwtTokenMiddleware();

        app.UseUnitOfWork();
        app.UseIdentityServer();
        app.UseAuthorization();
        app.UseSwagger();
        app.UseAbpSwaggerUI(options =>
        {
            options.SwaggerEndpoint("/swagger/v1/swagger.json", "Your API");
        });
        app.UseAuditing();
        app.UseAbpSerilogEnrichers();

        app.UseConfiguredEndpoints();
    }

Start blazor app

open browser and navigate to whatever url it is with /booking at the end.

additional info:

I just found out that I am able to download the source code. After some digging I found out that the issue is inside the style-initializer.

If I changed the code to the following :

function createStyleUrl(theme, type) {

        if (isRtl()) {
            theme = theme + '.rtl';
        }

        let pathPrefix = window.location.pathname;

        if (pathPrefix == `/`) {
            pathPrefix = ``;
        }
        console.log(`path prefix: ` + pathPrefix);

        if (type) {

            return pathPrefix + `/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/${window.currentLayout}/css/${type}-${theme}.css`
        }
        return pathPrefix + `/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/${window.currentLayout}/css/${theme}.css`;
    }

The style loads and stuff works.

Go to accepted answer
1 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    See: https://support.abp.io/QA/Questions/4441#answer-27f5a8fa-264a-a9c2-66c3-3a0919e17aad

    The problem has been fixed, and it will include in the next patch.

    You ticket refunded.

Assignee
No one
Labels
Non yet
Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11