.Net Core Spa 资源在相对路径上的路由答案

【问题标题】：.Net Core Spa Resource Routing on Relative paths.Net Core Spa 资源在相对路径上的路由
【发布时间】：2019-07-14 14:04:39
【问题描述】：

我配置了以下 .net core spa 应用程序

    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";
        });
    }

除了图片和其他静态资源是相对于初始 url 而不是根访问的事实之外，一切都很好。

例如，当我的初始 url 是 https://localhost:44380/ 时，图像从 https://localhost:44380/ 正确获取。

但是，当我的初始 url 是 https://localhost:44380/administration/user-profiles 时，图像被错误地从：https://localhost:44380/administration/ 获取。

我无法将 css 更改为第 3 方库。因此，我只想将所有资源文件路由到根 url。

编辑： 这是那个“x”的css

.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; }

【问题讨论】：

可以给检查的UI代码截图吗？
向我们展示一些来自 View 的代码，以了解您如何显示图像
请求图片的不是启动代码。您应该在客户端播种如何组合这些图像路由。
我编辑了帖子，但是我在想如果所有图像都可以路由到单个控制器，那么 1 可以检查 url 并返回正确的图像。

标签： asp.net-core url-routing single-page-application middleware asp.net-core-2.1

【解决方案1】：

最终成功了

        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();

【讨论】：

【解决方案2】：

使用~/表示根目录，也就是https://localhost:44380

【讨论】：

【解决方案3】：

这是浏览器的默认行为

您在 css 上使用了相对路径

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

根据规范：

部分 URL 被解释为相对于样式表的来源，而不是相对于文档

因此，如果您的样式表是从 https://localhost:44380/administration/ 加载的（您可以在 devtools 网络面板上查看），浏览器将尝试从那里加载图像。

stack overflow question that I found 中有关于此问题的更多信息

【讨论】：

显然......正如我所说，我无法更改第 3 方库，因此我需要一些可以拦截所有静态文件请求并重新路由它们的处理程序。