在请求管道的一个分支中提供SPA时，我的SPA文件给出404错误.如何使我的SPA可以使用我的静态文件? [英] My SPA files are giving 404 errors when serving the SPA in a branch of the request pipeline. How do I make my static files available to my SPA?

问题描述

首先，在项目根目录中，有一个名为ClientApp的文件夹，其中包含一个文件夹build，这是我的前端构建输出的位置.

First of, in my project root I have a folder called ClientApp, which contains a folder build which is where the output of my frontend build is located.

然后，在Startup.cs中，我在ConfigureServices中具有以下内容:

Then, in Startup.cs, I have the following in ConfigureServices:

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddSpaStaticFiles(configuration => {
        configuration.RootPath = "ClientApp/build";
    });
}

接下来，我的Configure方法如下所示:

Following, my Configure method looks as follows:

 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
 {
     if (env.IsDevelopment()) {
         app.UseDeveloperExceptionPage();
     } else {
         app.UseExceptionHandler("/Error");
         app.UseHsts();
     }

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

     app.UseMvcWithDefaultRoute();

     app.Map("/dashboard", dashboard => {
         dashboard.Use(async (context, next) => {
             if (context.User.Identity.IsAuthenticated) {
                 await next();
                 return;
             }

             context.Response.Redirect("/Account/Login");
         });

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

             if (env.IsDevelopment()) {
                 spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
            }
        });
    });
}

如果我删除了.Map(...)并只在app IApplicationBuilder实例上提供spa，那么它将起作用.

If I remove the .Map(...) and just serve the spa in on the app IApplicationBuilder instance, then it works.

预先感谢您的帮助，这已经困扰了我几天了.

Thank you in advance for any help, this has been bugging me for a few days now.

修改 我最终想要的设置如下. /dashboard将为SPA应用程序提供服务，并且访问该路由的任何人都必须经过身份验证.但是，诸如/Account/Login之类的路由将不属于SPA.

Edit The setup I would want in the end is as follows. /dashboard would serve a SPA application, and anyone accessing that route has to be authenticated. However, routes such as /Account/Login would not be part of the SPA.

通过将UseSpa移到Map之外，Mvc或wwwroot中的静态文件未处理的任何路由都将呈现SPA，但是在访问例如/about我要显示404，而不是显示404的SPA.

By moving UseSpa outside of the Map, any routes that are not handled by the Mvc or a static file in wwwroot will render the SPA, but when visiting e.g. /about I want to show a 404, not the SPA which renders the 404.

推荐答案

对于app.Map，它将基于路径https://localhost:44378/dashboard/路由请求.这意味着只有带有https://localhost:44378/dashboard/的请求才会进入Spa中间件.

For app.Map, it will route the request based on path https://localhost:44378/dashboard/. Which means only requests with https://localhost:44378/dashboard/ will go into the Spa middleware.

对于dashboard.UseSpa，它将保留https://localhost:44378/styles.bundle.css与https://localhost:44378/dashboard/不匹配的spa静态文件.

For dashboard.UseSpa, it will survery spa static files with https://localhost:44378/styles.bundle.css which will not match https://localhost:44378/dashboard/.

如果您不想将SPA中的请求基本路径更改为https://localhost:44378/dashboard/，则可以尝试将UseSpa移到app.Map("/dashboard"之外.

If you did not want to change the request base path in SPA to https://localhost:44378/dashboard/, you may try move UseSpa outside of app.Map("/dashboard".

        app.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });
        app.Map("/dashboard", dashboard =>
        {
            dashboard.Use(async (context, next) =>
            {
                if (context.User.Identity.IsAuthenticated)
                {
                    await next();
                    return;
                }
                context.Response.Redirect("/Account/Login");
            });
        });

更新

要更改 SPA静态文件请求URL，可以尝试如下更改package.json:

For changing SPA Static files request URL, you could try to change package.json like below:

"start": "ng serve --base-href=/dashboard/ --serve-path=/ --live-reload-client=https://localhost:port/frontend/sockjs-node/",

要在开发时选择另一种方法，请在下面的Startup

For another option while developing, change code below in Startup

        app.Map("/dashboard", frontendApp =>
        {
            frontendApp.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start --  --base-href=/frontend/ --serve-path=/ --live-reload-client=https://localhost:44302/frontend/sockjs-node/");
                }
            });
        });    

这篇关于在请求管道的一个分支中提供SPA时，我的SPA文件给出404错误.如何使我的SPA可以使用我的静态文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！