为什么 Asp net Core 会针对我的 Angular Spa dist 文件的请求返回 index.html？

Question

将我的 Asp Net Core Angular Spa 部署到共享 Web 服务器后，请求 angular 运行时组件 return 我的 index.html 文件。

编辑（为清楚起见改写问题）：

我有一个 angular 水疗中心，由 asp 网络核心 angular 模板提供服务。当我导航到应用程序的 url 时，索引页面被 returned 然后随后调用 return 客户端应用程序的脚本文件全部 return index.html 还有...即使 url 正在请求 runtime.js、main.js 等

除了我下面的代码摘录之外，还需要什么额外的配置？

public void ConfigureServices(IServiceCollection services)
{
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles();
    app.UseSpaStaticFiles();
    app.UseMvc();

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
    }); 
}

在我的 angular.json 中，我指定了以下 URL 前缀：

"baseHref": "/APPNAME/",
"deployUrl": "/APPNAME/ClientApp/dist/"

源代码树似乎是正确的。

每个运行时组件的请求都是成功的，但它们都是 return 我的 index.html 而不是请求的内容。

请求URL：https://example.com/MYAPP/ClientApp/dist/main.17cf96a7a0252eeecd9e.js

来自 Chrome 网络调试器的响应：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>APP NAME</title>

  <base href="/APPNAME/">

  <meta content="width=device-width, initial-scale=1"
        name="viewport">
  <link href="HRDRicon.png"
        rel="icon"
        type="image/x-icon">
<link rel="stylesheet" href="/APPNAME/ClientApp/dist/styles.d9e374eff45177231bee.css"></head>
<body class="fixed-sn white-skin">

<app-root></app-root>

<noscript>
  <p>
    Sorry, JavaScript must be enabled to use this app
  </p>
</noscript>

<script type="text/javascript" src="/APPNAME/ClientApp/dist/runtime.e460f84ccfdac0ca4695.js">
</script><script type="text/javascript" src="/APPNAME/ClientApp/dist/polyfills.d0cb8e9b276e2da96ffb.js"></script>
<script type="text/javascript" src="/APPNAME/ClientApp/dist/scripts.a54ea6f0498a1f421af9.js"></script>
<script type="text/javascript" src="/APPNAME/ClientApp/dist/main.17cf96a7a0252eeecd9e.js"></script>
</body>
</html>

我将在评论中为图像添加 link，因为它在原始 post 中受到限制。

Answer 1

我也为水疗扩展而苦恼。似乎 UseSpa 为 index.html 设置了一个包罗万象的规则，该规则还拦截了对所有静态文件（如 .js 和 .css）的请求。要让我的水疗中心在子目录中工作，只需要修改 startup.cs 中的 1. 和 2.。无需水疗扩展。

public static void Configure( IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    // 1. Configure request path for app static files
    var fileExtensionProvider = new FileExtensionContentTypeProvider();
    fileExtensionProvider.Mappings[".webmanifest"] = "application/manifest+json";
    app.UseStaticFiles(new StaticFileOptions()
    {
        ContentTypeProvider = fileExtensionProvider,
        RequestPath = "/myapp",
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), @"MyApp/dist"))
    });

    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization(); 

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapRazorPages();
        // 2. Setup fallback to index.html for all app-routes
        endpoints.MapFallbackToFile( @"/myapp/{*path:nonfile}", @"MyApp/dist/index.html");
    });
}

Answer 2

对于我的配置，我有一个 ASP.Net Core 5 项目，其中 angular 应用程序部署到 wwwroot 文件夹下名为 ng 的文件夹中

当从 /ng 进行深度链接时，我需要默认提供 index.html，我还需要提供来自 /

的其他非 angular 内容

为此，我添加了两个静态文件配置，一个用于 angular，一个用于常规文件

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
...
    FileExtensionContentTypeProvider contentTypes = new FileExtensionContentTypeProvider();
                contentTypes.Mappings[".apk"] = "application/vnd.android.package-archive";
                app.UseStaticFiles(new StaticFileOptions
                {
                    ContentTypeProvider = contentTypes
                });
    
                var fileExtensionProvider = new FileExtensionContentTypeProvider();
                fileExtensionProvider.Mappings[".webmanifest"] = "application/manifest+json";
                app.UseStaticFiles(new StaticFileOptions
                {
                    ContentTypeProvider = fileExtensionProvider,
                    RequestPath = "/ng",
                    FileProvider = new PhysicalFileProvider(
                    Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot/ng"))
                });

（额外的apk配置是为了让用户直接下载android包）

Al 还需要为 /ng/ url

设置端点回退到 index.html

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

                endpoints.MapFallbackToFile(@"/ng/{*path:nonfile}", @"ng/index.html");
            });

当然，在 index.html 中的 angular 中，基本 href 设置为 ng

为什么 Asp net Core 会针对我的 Angular Spa dist 文件的请求返回 index.html？

Why is index.html returned by Asp net Core for requests of my Angular Spa dist files?

iis

url-rewriting

kestrel

asp.net-core

angular