Middleware intercepts /api and other requests

[lordfeck]

Hi,

I'm using the extension and have it set up in Program.cs like this:

    if (app.Environment.IsDevelopment())
    {
        app.UseViteDevelopmentServer(true);
        
        // Use dev error screen with a more detailed message.
        app.UseStatusCodePagesWithReExecute("/Home/ErrorDev", "?statusCode={0}");
    }

My web app uses Razor MVC pages in a few places - currently login and a legacy UI. We also use plain HTML Razor to serve the error page and log 404s and other abnormal requests. We wish to keep the Razor/MVC pages for login and 404s, it suits us because the app is split into 2 sections:

The vite app has two entry points that 'boot' from a Razor page (eg, /client/ui, /mynd/ui), and I have this working successfully. I also have routing configured to redirect all requests under this route to Vite, so the webapp handles the routing from there. All as expected.

Yet it seems to intercept other requests - /api, and anything that should show my 404 page. Instead of showing the api route, or showing the 404 on other routes that don't fall under the two SPA routes I get the default Vue/Vite page, aka index.html in the Vite/SPA root directory:

I don't want it to do this, instead it should either serve a 404 page as indicated by app.UseStatusCodePagesWithReExecute("/Home/ErrorDev", "?statusCode={0}"); or the API route. Is it possible to tell the middleware that everything not under the /client/ui and /mynd/ui routes should not be intercepted and should instead be routed to ASP.NET MVC?

[Eptagone]

Hi. Try to move the line app.UseViteDevelopmentServer(true); after other Uses.

Something similar happened here #12

[lordfeck]

Hi @Eptagone, thanks for getting back so quickly.

I moved the call to UseViteDevelopmentServer to be just before app.run() but unfortunately I still see the problem.

I suspected something with URL rewriting earlier in the pipeline:

    // Rewrite the SPA routes
    app.MapControllerRoute( name: "MYNDSpa", pattern: "/mynd/ui/{*url}", 
        defaults: new {area="MYND", controller = "Ui", action = "Index"} );
    app.MapControllerRoute( name: "ClientSpa", pattern: "/client/ui/{*url}", 
        defaults: new {area="Client", controller = "Ui", action = "Index"} );

but commenting out these lines made no difference.

If you need more details I'll be happy to provide.

[Eptagone]

Hi @lordfeck. Mmm, I'll try to reproduce it at some point. But if you happen to have a minimal reproduction repo on hand, I would appreciate it, it would be faster.

[lordfeck]

Hi again @Eptagone, if there are certain files of interest I'll be able to pull them out of the main repo and on to a public one. I could extract Program.cs as well as the vite app root, along with anything else that's needed for building a minimal reproduction. Will let you know when it's up.

[micpog]

Aren't you missing fallback route on server endpoint configuration to point to Home/ErrorDev?

[lordfeck]

@micpog We've this line:

        app.UseStatusCodePagesWithReExecute("/Home/ErrorDev", "?statusCode={0}");

Which has been working for error pages before. The problem is that the call to app.UseViteDevelopmentServer(true) passes all unknown requests to the Vite server.

Interestingly @Eptagone when I disable the middleware by calling app.UseViteDevelopmentServer(false) instead the Vite dev server doesn't slurp all routes and I see the error page as before, but of course with the middleware disabled my Vue app is missing its assets. It appears this is the crux of our problem - it assumes anything that isn't a known route is an asset, so is proxying the request to the Vite dev server - which serves index.html as default.

Maybe if I switch the asset directory to be nested instead of the root it will fix it. If I've no luck I'll get the minimal repro repo up fr you to play with. Thanks again for your time.

[lordfeck]

@Eptagone I have the repo up now: https://github.com/lordfeck/VueViteSampleApp. Same code but stripped to the minimum. It all works so is a simple case of checking it out and building then running it.

There is also a further description of the problem + my aims which may help, let me know if you need anything else!

[Kalshu]

In my case, I need to push some constraint in my mapping :
constraints: new { subpath = @"^(?!_api).*$" },
But it's in a large match pattern
endpoints.MapControllerRoute(
name: WebConstants.Routes.Front.Index,
pattern: "{subpath}",
constraints: new { subpath = @"^(?!swagger|_api).$" },
defaults: new { controller = "Front", action = FrontController.IndexActionName }
).RequireAuthorization();

I'm not sure if it's correspond to your usecase