.Net Core 3.1 SPA React Application无法在生产中使用Hangfire资讯主页/Swagger [英] .Net Core 3.1 SPA React Application doesn't serve Hangfire dashboard / Swagger on production

问题描述

使用 dotnet new react 从 .NET Core 3.1 安装React应用程序模板后，该应用程序可以在开发和生产环境中完美运行.尝试使用Swagger或Hangfire仪表板端点时，会出现问题.

After installing the React app template from .NET Core 3.1 using dotnet new react the application works perfectly in Development and Production. The problem appears when trying to use Swagger or Hangfire dashboard endpoints.

在创建应用程序后，我添加了Hangfire的程序包参考，并出于实际目的添加了内存存储空间:

After the app is created I add the package reference for Hangfire and for practical purposes the memory storage:

<PackageReference Include="Hangfire" Version="1.7.*" />
<PackageReference Include="Hangfire.MemoryStorage" Version="1.7.0" />

在 Startup.cs 中:

public void ConfigureServices(IServiceCollection services)
{

    services.AddControllersWithViews();
    
    services.AddHangfire(config =>
        config.SetDataCompatibilityLevel(CompatibilityLevel.Version_170)
        .UseSimpleAssemblyNameTypeSerializer()
        .UseDefaultTypeSerializer()
        .UseMemoryStorage());

    services.AddHangfireServer();

    // In production, the React files will be served from this directory
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/build";
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHangfireDashboard();
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
}

发布并运行应用程序后，除Hangfire仪表板外，该应用程序运行正常，并尝试访问路由:/Hangfire 导致服务器返回SPA index.html

After publishing the application and run it, the app works fine except the Hangfire dashboard, and trying to access the route: /Hangfire causes the server return the SPA index.html

但是，如果我刷新页面进行硬性重新加载，则仪表板会很好地加载.

But if I refresh the page doing a hard reload, the dashboard loads fine.

Swagger也发生了同样的事情.

Same thing occurs with Swagger.

有人可以帮我吗?

推荐答案

在遵循 Guilherme 建议之后，注销服务人员即可解决此问题.我没有忽略路由，而是选择取消注册.

After following Guilherme suggestion, unregistering the service worker solved the issue. Instead of ignoring the routes, I opted to unregister it.

非常感谢您！

这篇关于.Net Core 3.1 SPA React Application无法在生产中使用Hangfire资讯主页/Swagger的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！