.Net Core Spa Resource Routing on Relative paths

Question

I have the following .net core spa application configured

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseDatabaseErrorPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/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.UseCookiePolicy();

        app.UseAuthentication();


        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");


            routes.MapRoute(
                name: "catch",
                template: "{*url}",
                defaults: new { controller = "Home", action = "Index" });
        });

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "Spa";
            spa.Options.DefaultPage = "/home/index";
        });
    }

Everything works well except for the fact that images and other static resources are accessed relatively to the initial url instead of the root.

eg When my initial url is https://localhost:44380/, images are correctly fetched from https://localhost:44380/.

However when my initial url is https://localhost:44380/administration/user-profiles, images are incorrectly fetch from: https://localhost:44380/administration/.

I am not able to change the css as its a 3rd party library. Hence I would like to just route all resource files to the root url.

Edit: Here is the css of that "x"

.chosen-container-multi .chosen-choices .search-choice .search-choice-close {
    background: url("chosen-sprite.png") right top no-repeat;
    display: block;
    font-size: 1px;
    height: 10px;
    position: absolute;
    right: 4px;
    top: 5px;
    width: 12px;
    cursor: pointer; }

It's not the startup code who's requesting images. You should be sowing how you compose those image routes on the client. — Pablo Recalde, Jul 21 '19 at 14:21
I edited the post, however I am thinking if all images can be routed to a single controller then 1 could inspect the url and just return the correct image. — Murdock, Jul 21 '19 at 15:14

score 2 · Accepted Answer · answered Jul 25 '19 at 21:55

Eventually this did the trick

        app.UseHttpsRedirection();  

        app.Use((context, next) =>
        {
            if (!string.IsNullOrWhiteSpace(System.IO.Path.GetExtension(context.Request.Path)))
            {
                context.Request.Path = Invariant($"/{System.IO.Path.GetFileName(context.Request.Path)}");
            }
            return next();
        });

        app.UseStaticFiles();

score -1 · Answer 2 · answered Jul 16 '19 at 19:49

-1

Use ~/ to refer to the root directory in other words https://localhost:44380

answered Jul 16 '19 at 19:49

jazzmasterkc

379
6
17

score -1 · Answer 3 · answered Jul 21 '19 at 17:41

It's the browser's default behaviour

You're using a relative path on your css

background: url("chosen-sprite.png") right top no-repeat;

as per specification:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

so if your stylesheet is loading from https://localhost:44380/administration/ (you can check it on devtools network panel) the browser will try to load the image from there.

There's more info regarding this issue in this stack overflow question that I found

Obviously... As I said I cannot change the 3rd party library hence I need some handler that can intercept all static file requests and reroute them. — Murdock, Jul 22 '19 at 11:12

.Net Core Spa Resource Routing on Relative paths

3 Answers3