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

时间:2019-06-11 00:20:31

标签: angular iis asp.net-core url-rewriting kestrel

将我的Asp Net Core Angular Spa部署到共享的Web服务器后,对角度运行时组件的请求将返回我的index.html文件。

编辑(为清楚起见,将问题重新说明):

我有一个由ASP网络核心角度模板提供的角度水疗中心。当我导航到应用程序的url时,将返回索引页面,然后返回调用以返回客户端应用程序的脚本文件的所有调用也将返回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/"

源代码树似乎正确。

对每个运行时组件的请求都成功,但是它们都返回了我的index.html而不是所请求的内容。

请求网址: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>

我将在评论中添加图像的链接,因为该链接在原始帖子中受到限制。

2 个答案:

答案 0 :(得分:4)

我也为水疗中心扩展而苦恼。似乎UseSpa为index.html设置了一个包罗万象的规则,该规则还拦截了对所有静态文件(如.js和.css)的请求。 为了使我的spa在子目录中工作,所需要做的就是在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");
    });
}

答案 1 :(得分:0)

在我公司内部网的特殊实现中,创建一个web.config并添加以下内容对我来说很成功。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="false">
      <remove name="WebDAVModule" />
    </modules>
  </system.webServer>
</configuration>