.NET Core、Angular2、NancyFX - 404 在浏览器中更改 URL答案

【问题标题】：.NET Core, Angular2, NancyFX - 404 changing URL in browser.NET Core、Angular2、NancyFX - 404 在浏览器中更改 URL
【发布时间】：2017-09-28 08:40:41
【问题描述】：

使用 .NET Core 静态文件为应用程序提供服务时，我无法在浏览器中更改 URL。这样做时，我会得到 p>

404 - 未找到

Nancy 错误页面。

唯一有效的 URL 是基本 URL，localhost:5000。将 URL 更改为 localhost:5000/reservations 会给我 404。当不在基本 URL 上时按 F5 也会导致 404。

如果我使用 browsersync url，localhost:4200，一切正常，我可以更改 URL 并按 F5 而不出现 404。这是我在开发时正在做的事情，但在使用 IIS 部署在服务器上时不是。

在 IIS Express 中运行应用程序

ng build（文件与 index.html 一起复制到 wwwroot）
启动 IIS Express

Startup.cs

public class Startup
{
    public Startup(IHostingEnvironment env)
    {
        var builder = new ConfigurationBuilder()
            .SetBasePath(env.ContentRootPath)
            .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
            .AddEnvironmentVariables();
        Configuration = builder.Build();

        env.ConfigureNLog("nlog.config");
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddAuthentication(IISDefaults.AuthenticationScheme);

        services.AddMvc(config =>
        {
            var policy = new AuthorizationPolicyBuilder()
                .RequireAuthenticatedUser()
                .Build();
            config.Filters.Add(new AuthorizeFilter(policy));
        });

        services.AddMvc();

        services.InjectServices();

        services.AddOptions();

        services.Configure<Endpoints>(Configuration.GetSection("Endpoints"));

        services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();

        services.AddSingleton<IConfiguration>(Configuration);
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        app.Use(async (context, next) =>
        {
            await next();
            if (!context.Request.Path.Value.StartsWith("/api/"))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        });

        app.UseDefaultFiles();

        app.UseStaticFiles();

        loggerFactory.AddNLog();

        app.AddNLogWeb();

        app.UseOwin(x => x.UseNancy(new NancyOptions
        {
            Bootstrapper = new Bootstrapper(app)
        }));
    }
}

Bootstrapper.cs

public class Bootstrapper : DefaultNancyBootstrapper
{
    readonly IApplicationBuilder _app;

    public Bootstrapper(IApplicationBuilder app)
    {
        _app = app;
    }

    protected override void ConfigureApplicationContainer(TinyIoCContainer container)
    {
        base.ConfigureApplicationContainer(container);

        container.Register<IOptions<Endpoints>>(_app.ApplicationServices.GetService<IOptions<Endpoints>>());

        container.Register<IReservationService>(_app.ApplicationServices.GetService<IReservationService>());
    }
}

wwwroot

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>XXX</title>
    <base href="/">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" type="image/x-icon" href="XXX">
    <link href="styles.61cc257ef8131303860b.bundle.css" rel="stylesheet" />
</head>
<body>
    <app-root></app-root>
    <script type="text/javascript" src="inline.f68c652d205feae6e02a.bundle.js"></script>
    <script type="text/javascript" src="polyfills.756a44edc7e0a68ce65c.bundle.js"></script>
    <script type="text/javascript" src="vendor.940a3ce39a746f717f7b.bundle.js"></script>
    <script type="text/javascript" src="main.d5f9dd82a3600822cae2.bundle.js"></script>
</body>
</html>

我了解处理来自服务器的静态内容存在一些问题，但我似乎无法弄清楚。

在 .NET Core 中托管 Angular 应用程序时，如何使用浏览器 URL 进行导航？

更新 1：

添加后：

PerformPassThrough = (context => context.Response.StatusCode == HttpStatusCode.NotFound)

404 错误消息消失，但页面现在是空白的，除了控制台中的 404 之外没有任何错误消息..

【问题讨论】：

标签： c# .net angular asp.net-core nancy

【解决方案1】：

修改了 Startup.cs
添加了为所有请求返回 index.html 的模块。
在 bootstrapper.cs 中配置根路径。

Startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    //For serving index.html on baseurl - this can we done in AppNancyModule aswell: Get("/", _ => View["index"]);
    app.UseDefaultFiles();

    app.UseStaticFiles();

    loggerFactory.AddNLog();

    app.AddNLogWeb();

    app.UseOwin(x => x.UseNancy(new NancyOptions
    {
        Bootstrapper = new Bootstrapper(app, env)
    }));
}

AppNancyModule

public class AppNancyModule : NancyModule
{
    public AppNancyModule()
    {
        //Get("/", _ => View["index"]);

        Get(@"^(.*)$", _ => View["index"]);
    }
}

Bootstrapper.cs

public class AppRootPathProvider : IRootPathProvider
{
    private readonly IHostingEnvironment _environment;

    public AppRootPathProvider(IHostingEnvironment environment)
    {
        _environment = environment;
    }
    public string GetRootPath()
    {
        return _environment.WebRootPath;
    }
}

public class Bootstrapper : DefaultNancyBootstrapper
{
    readonly IApplicationBuilder _app;

    protected override IRootPathProvider RootPathProvider { get; }

    public Bootstrapper(IApplicationBuilder app, IHostingEnvironment environment)
    {
        RootPathProvider = new AppRootPathProvider(environment);
        _app = app;
    }

    protected override void ConfigureApplicationContainer(TinyIoCContainer container)
    {
        base.ConfigureApplicationContainer(container);

        container.Register<IOptions<Endpoints>>(_app.ApplicationServices.GetService<IOptions<Endpoints>>());

        container.Register<IReservationService>(_app.ApplicationServices.GetService<IReservationService>());
    }
}

【讨论】：

【解决方案2】：

IMO 你写的中间件应该在 app.UseDefaultFiles(); 之后和 app.UseStaticFiles(); 而且您只处理 API 请求。尝试稍微重写它以处理 404 错误并且不处理带有扩展名的请求：

app.Use(async (context, next) =>
{
    await next();

    if (context.Response.StatusCode == 404
        && !Path.HasExtension(context.Request.Path.Value)
        && !context.Request.Path.Value.StartsWith("/api/"))
    {
        context.Request.Path = "/index.html";
        await next();
    }
});

【讨论】：

没有成功，还是404
太糟糕了。就是这样，它是如何为我工作的：asp.net-hacker.rocks/2016/04/04/… 也许是因为一些 NancyFX 配置，我从未使用过它。
请看我的回答，如果您有异议，请告诉我:) 谢谢

【解决方案3】：

您需要删除第一个await next();。这会将请求发送到管道中的/reservations，在将 URL 重写为 index.html。

当它到达 Nancy 时，它会查看它是否可以处理 /reservations，它不能，并呈现 404 页面。

【讨论】：

没有成功，仍然是银行页面。另外，它给出了控制台错误：TypeError: error.json is not a function
请看我的回答，如果您有异议，请告诉我:) 谢谢