ASP.NET Core应用虚拟路径下静态文件加载异常的配置问题

1. 正确配置ASP.NET Core应用在虚拟路径下提供静态文件的步骤 #

调整中间件顺序与配置 #

首先确保UsePathBase中间件的位置正确，必须在UseStaticFiles及路由相关中间件之前，同时建议从配置而非硬编码获取虚拟路径，提升灵活性：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IConfiguration config)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    // 从配置读取虚拟路径，避免硬编码
    var pathBase = config["PathBase"] ?? "/x/y";
    if (!string.IsNullOrEmpty(pathBase))
    {
        app.UsePathBase(pathBase);
    }

    // 启用静态文件服务，默认已支持基于PathBase的路径映射
    app.UseStaticFiles();

    // 后续路由、授权等中间件
    app.UseRouting();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}

修复静态文件引用方式 #

核心问题：你页面中静态文件的引用使用了绝对根路径（如/Content/css/main.css），导致跳过虚拟路径直接请求根目录。需改用以下方式：

• 使用ASP.NET Core Tag Helper（推荐）：

  <link asp-src="~/Content/css/main.css" rel="stylesheet">
  <script asp-src="~/Content/js/main.js"></script>
  

  ~/会自动映射到配置的PathBase，最终生成/x/y/Content/css/main.css的路径。
• 若无法使用Tag Helper，使用Url.Content方法：

  <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet">
  

• JavaScript中引用资源时，先注入基路径再拼接：

  <script>
      const basePath = '@Url.Content("~/")';
      // 示例：加载JS文件
      const script = document.createElement('script');
      script.src = `${basePath}Content/js/main.js`;
      document.body.appendChild(script);
  </script>
  

容器化部署的反向代理配置 #

如果使用Nginx、IIS等反向代理，需确保代理配置正确传递虚拟路径信息：

• Nginx示例配置：

  location /x/y {
      proxy_pass http://localhost:5000; # 容器映射的本地端口
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-Path /x/y; # 传递虚拟路径给应用
  }
  

  配置后，ASP.NET Core可自动识别X-Forwarded-Path作为PathBase，无需在代码中硬写。

2. 本地测试的静态文件访问路径 #

• 若本地配置了PathBase = "/x/y"，则需通过localhost/x/y/Content/...访问静态文件；
• 若想本地开发时省略虚拟路径，可在appsettings.Development.json中设置：

  {
    "PathBase": ""
  }
  

  此时本地可直接通过localhost/Content/...访问，部署服务器时再将PathBase设为/x/y即可。

内容的提问来源于stack exchange，提问作者googlesnet