logo标签列表

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

angulariisasp.net-coreurl-rewritingkestrel
3
在将我的Asp Net Core Angular Spa部署到共享Web服务器后，请求Angular运行时组件会返回我的index.html文件。
编辑（重述问题以澄清）：
我有一个由Asp Net Core Angular模板提供服务的Angular spa。当我导航到应用程序的URL时，将返回索引页面，然后后续调用也将返回index.html作为客户端应用程序的脚本文件...即使URL正在请求runtime.js、main.js等。
除了下面的代码摘录外，还需要哪些额外配置？
原始答案：Original Answer 
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/"

原始答案：The source tree appears to be correct.
每个运行时组件的请求都成功了，但它们都返回我的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>

我会在评论中添加图片链接，因为原始帖子中受到了限制。"Original Answer"翻译成"最初的回答"。
如果您将应用程序部署到与服务相同的域中，则不需要使用中间件。 - JeffryHouser
我重新表述了我的标题问题。我的假设是需要一些中间件来将请求默认到正确的资源。如果我不需要中间件，你能想到其他原因吗，为什么index.html中脚本文件的链接都返回index.html的响应？如果需要更多细节，请告诉我。谢谢！ - JordanM
根据截图和代码，我并不真正理解问题出在哪里。 - JeffryHouser
所以，与其为客户端应用程序获取index.html和main.js、polyfills、runtime和样式表，不如让index.html首先被加载，然后再为其他静态资源（如脚本文件）的所有引用再次加载index.html。 - JordanM
听起来像是服务器配置问题，但我不清楚为什么会这样。您能直接加载JS文件吗？是否有任何重定向规则？JS / CSS文件的正确MIME类型设置了吗？ - JeffryHouser
显示剩余6条评论
2个回答
5

我也曾在spa扩展方面遇到了困难。看起来UseSpa设置了一个捕获所有静态文件（如.js和.css）请求的index.html的万能规则。 要让我的spa在子目录中工作，只需在startup.cs中进行修改1和2即可，不需要任何spa扩展。

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");
    });
}
0
对于我的配置，我有一个ASP.Net Core 5项目，其中包含一个名为ng的文件夹下部署的Angular应用程序，该文件夹位于wwwroot文件夹下。

enter image description here

当从/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/网址设置索引.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

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接