Question

我已配置以下.net核心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而不是根目录访问图像和其他静态资源的事实。

例如，当我的初始网址为https://localhost:44380/时，可以从https://localhost:44380/正确提取图像。

但是，当我的初始URL为https://localhost:44380/administration/user-profiles时，会错误地从https://localhost:44380/administration/中获取图像。

我无法将css更改为其第三方库。因此，我只想将所有资源文件路由到根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; }

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

Answer 2

使用〜/来引用根目录，换句话说，https://localhost:44380

Answer 3

这是浏览器的默认行为

您在CSS上使用了相对路径

export interface IErrorIdentification<T extends Error> {
  errorClass?: new() => T;
}

按照规范：

部分URL相对于样式表的来源而不是相对于文档进行解释

因此，如果您的样式表是从background: url("chosen-sprite.png") right top no-repeat;加载的（可以在devtools网络面板上检查），浏览器将尝试从那里加载图像。

stack overflow question that I found

中有关于此问题的更多信息

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

3 个答案: